IE CSS Bugs они вас всегда достанут
Internet Explorer 6 имеет лучшую CSS поддержку из всех браузеров в первом приближении … СЕМЬ ЛЕТ НАЗАД. Его проблемы поддержки CSS достают нас до сих пор. Я до сих пор получаю комментарии от людей с решениями багов в ИЕ 6. Я до сих пор чувствую важность создания правильно отображения, если это конечно возможно. Вот короткий список основных проблем в IE 6, с которыми часто встречаются верстальщики.
Блочная модель
Это наверно самая главная ошибка из всех в ИЕ 6. Создадим такой блок.
div#box {
width : 100px;
border : 2px solid black;
padding : 10px}
IE 6 расчитает ширину блока равной 100px. Современные браузеры рассчитают ширину блока равной 124px.
Проблема с двойным отступом
Используя следующих блок, мы хотим его разместить справа:
div#box {
float : right;
margin-right : 20px}
IE 6 увеличит с 20px до 40px. Это проблема решается, вставлением в CSS фикса “display: inline;” в div.
Нет Min Width / Min Height
Директивы min-width и min-height позиционируются как природные и логические вещи, но ИЕ 6 определяет их как не верные и полностью игнорирует. Min-height невероятно полезна для таких вещей как footer. Например, вам необходимо что бы высота footer была как минимум 100px высотой, потому что используете фоновое изображение, но вы не хотите чтобы высота была статичной (закрепленной), если в случае у вас будет переполнение блока тестом или другим содержимым. Min-height идеальное решение, но использование его одного не даст необходимой высоты блока. Современные барузеры поддерживают оба понятия. Для ИЕ 6 можно использовать следующее "Min-height, min-width, max-height, max-width для IE6"
Шаг вниз
Обычно плавающие объекты могут быть выравнены в горизонтальной линию. Но не в ИЕ 6. Каждый следующий блок будет ниже на один уровень, так называемый "stepdown". Для решения этой проблемы используется следующая директива
display:inline;
Другие примеры решений можете посмотреть здесь preventing stepdown here.
Нет наведения
Cамыt современные браузеры поддерживают "hover" практически для всех элементов, но не в ИЕ 6. IE 6 поддерживает только псевдокласс для гиперссылок (<a>). Решение для использования ищите здесь proprietary fix, или просто откажитесь от hover для других элементов.;
Отсутствие поддержки альфа прозрачности в PNG
Частью шутки является то, что Microsoft сам разработал PNG формат, но их ихние браузеры не поддерживают прозрачность (до IE 7). Решение нашлось roundup of different fixes для этого. Помните, что регулярные без альфа-прозрачности PNG превосходно работают без фиксов в IE 6. Как вариант вы можете использовать прозрачность GIF, но она желает лучшего. Решение я писал в соседней статье «Прозрачность PNG и IE6 или как все таки правильно»
Проблема с абсолютным позиционированием для плавающих блоков
Есть такой код
<div class="body"><span class="topleft"></span><span class="bottomleft"></span></div>
И соответственно задаем стили
.body { float:left; width:50%; position:relative;}
.body .topleft { position:absolute; top:0; left:0;}
.body .topright { position:absolute; bottom:0; left:0;}
В этом случае оба блока span окажутся в одной точке. Чтобы это исправить надо для ие6 задать одно просто, но не валидное условие
.body {zoom:1}
И тогда все блоки встанут на место
Отсутствие псевдоселектора :first-child
Решается довольно просто с использованием expression
.nav li {
border-left:expression((this == this.parentNode.firstChild) ? ('none') : ('1px solid blue'));
}
Удобный инструмент от Microsoft. Если элемент с таким условием первый, то задается описание стиля как none, иначе "1px solid blue". Проверенный инструмент, работает однако.
Пара мыслей
Internet Explorer 6 в некотором роде уникальный браузер, которому уже более 10 лет, и им до сих пор пользуются. Изучаю документацию MSDN, можно найти множество прикольный статей. Оказывается Internet Explorer 6 одним из первых поддерживал CCS3, но правда через expression, например тени для блоков и текста, градиенты в фоне и другие вещи.
Если имеется опыт, то верстать под ИЕ6 возможно без сложностей. Все проблемы и решения, которые я знаю, буду выкладывать в этой статье.
Комментарии