Кроссбраузерность – это "правильное" написание HTML и CSS, которое обеспечивают возможность отображения страниц сайта одинаково во всех браузерах. Так как не все блоги и сайты отображаются в разных браузерах одинаково. Требуются определенные действия для правильного (желательно валидного) отображения вашего контента.
IE
Особой проблематичностью отличается браузер Internet Explorer.Поэтому
разберем несколько вариантов решения данной проблемы.
Браузеры IE поддерживают условные комментарии,которые создают видимость
только для IE.
/сначала создайте таблицу стилей(css) без каких-либо исправлений
/далее создайте таблицу стилей с исправлениями для IE и сохраните ее отдельно(ie.css)
/затем подключите таблицу стилей с помощью условных комментариев
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style/ie.css"/>
<! [endif]-->
Подключать надо сначала общие таблицы стилей,а затем таблицы для IE. Данный метод позволяет сохранить полное соответсвие спецификации. Если же требуется незначительное изменение кода,то можно использовать хаки. Поставив двойной слеш (//) перед css-свойством даст видимость данного свойства только браузеру IE любой версии. Поставив минус (-) или (_) перед свойством,тогда данный css увидит только IE6.
пример
#style
{
color:#000000;
//color:#000000; /*для IE любой версии*/
-color:#000000; /* для IE6*/
}
подключение для Opera
<script type="text/javascript">
if(window.open)
{
document.write('<link rel="stylesheet" type="text/css" href="style/opera.css" />
}
</script>
подключение для Safari
<script type="text/javascript">
var detect=navigator.userAgent.toLowerCase();
if( (detect.indexOf('safari')) !=-1)
{
document.write('<link rel="stylesheet" type="text/css" href="style/safari.css" />
}
</script>
Разберем некоторые нюансы.
прозрачность
#opacity
{
opacity:0.5; /*для нормальных браузеров*/
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*для IE6,7,8*/
}
прозрачность фона
#rgba p
{
background: rgba(98, 135, 167, .4);/*не поддерживается IE*/
}
98 135 167-цвет фона в rgb
0.4-степень прозрачности (в отличие от IE прозрачность не передается на дочерние элементы)
тень для блочных элементов
#box
{
box-shadow: 4px 4px 3px #000000; /* для Opera 10.5+ */
-moz-box-shadow: 4px 4px 3px #000000; /* для Firefox 3.5+ */
-webkit-box-shadow: 4px 4px 3px #000000; /* для Safari и Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
/*для IE*/
}
- 4px размер тени по горизонтали
- 4px размер тени по вертикали
- 3px радиус размытия
- #000000 цвет тени
вращение элементов
#rotate
{
-webkit-transform: rotate(180deg);/*для Safari и Chrome */
-moz-transform: rotate(180deg);/* для Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/*для IE*/
}
Значение для IE может быть 1, 2, 3 или 4. Эти цифры соответствуют 90, 180, 270, и 360 градусов соответственно.
градиенты
#gradient
{
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}
