Мой основной проект: Боевые искусства в кинематографе! (fight-films.info)

Свеженькое
Реакция публики
Облако пометок
css Google html SEO WordPress Яндекс видео графический дизайн заработок индексация интернет ключевые слова контент партнерка поисковые системы посещаемость продвижение раскрутка реклама сайт статья хостинг

Настройка дизайна под IE, или борьба с багами

IEПри создании сайта (точней, при верстке дизайна для него) у многих веб мастеров возникают проблемы с отображениям сайтов в разных браузерах. Больше всего головной боли со старыми версиями 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

Один комментарий
  1. Иван Cheshir:

    А по русски есть где нибудь?
    На ie настолько все плохо что даже непонятно что именно сломалось )))
    и может можно писать тогда просто color : black;
    или тогда нормальные браузеры будут глючить?