При создании сайта (точней, при верстке дизайна для него) у многих веб мастеров возникают проблемы с отображениям сайтов в разных браузерах. Больше всего головной боли со старыми версиями Internet Explorer 6/7, так как Microsoft не обновляет их. Часто для покупателя шаблона очень важно что бы его сайт был крос-браузерным, а для этого необходимо доставать бубен.
Но в принципе не все так плохо, проблема решается.
Продвинутые верстальщики всегда находят выход из положение, прикручивая разные фиксы к Internet Explorer. О нескольких способах напишу.
Способ №1 – Условные комментарии:
Делаем файл со стилями для конкретного браузера. Что бы эти стили работали в шаблоне мы вставляем условный комментарий.
Для IE 7:
<!--[if IE 7]> Инструкции для IE 7 <![endif]-->
Для IE 6:
<!--[if IE 6]> Инструкции для IE 6 <![endif]-->
Тем же самим способом можно сделать і для остальных версий:
<!--[if IE]> Инструкции для Internet Explorer <![endif]--> <!--[if IE 5]> Инструкции для IE 5 <![endif]--> <!--[if IE 5.0]> Инструкции для IE 5.0 <![endif]--> <!--[if IE 5.5]> Инструкции для IE 5.5 <![endif]-->
Способ №2
Не всем нравится использовать в шаблоне условные комментарии, для вас способ №2.
Мы редактрируем CSS файл. Например делаем кроссбраузерным класс p:
p{
color: #000;
color : black; /* для IE8 и ниже - на всякий случай */
*color: grey; /* для IE7 и ниже */
_color: blue; /* для E6 и ниже */
}Удвоенные отступы
p{
float: right;
margin-right: 25px;
}Я думаю это самый частый баг в IE, связанный с параметром float. Для приведенного выше примера IE6 удвоит отступ справа. Это можно исправить, добавив параметр display:inline, используя один из выше приведенных вариантов.
Игнорирование внутренних отступов у кнопок:
Internet Explorer 6//7 игнорирует padding. Этот баг устраняют добавлением параметра overflow:visible для нужной кнопки.
Собственно, лекарств очень-очень много, а подробнее о всех багах IE можно узнать на сайте: www.positioniseverything.net