Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
8 г. назад

IE CSS Bugs они вас всегда достанут

IE BUG

Internet Explorer 6 имеет лучшую CSS поддержку из всех браузеров в первом приближении … В 2001 году. Его проблемы поддержки CSS достают нас до сих пор. Я до сих пор получаю комментарии от людей с решениями багов в ИЕ 6. Я до сих пор чувствую важность создания правильно отображения, если это конечно возможно. Вот короткий список основных проблем в IE 6, с которыми часто встречаются верстальщики.

Блочная модель

Это, наверное, самая главная ошибка из всех в IE6. Создадим такой блок:

.box { width : 100px; border : 2px solid black; padding : 10px
} 

IE6 рассчитает ширину блока, равную 100px. Современные браузеры рассчитают ширину блока, равную 124px.

Проблема с двойным отступом

Используя следующий блок, мы хотим его разместить справа:

.box { float : right; margin-right : 20px
}

IE6 увеличит с 20px до 40px. Это проблема решается вставкой в CSS такого фикса “display: inline;” к CSS свойствам данного блока.

Нет Min Width / Min Height

Директивы min-width и min-height позиционируются как природные и логические вещи, но IE6 определяет их как неверные и полностью игнорирует. Min-height невероятно полезна для таких вещей, как footer. Например, вам необходимо, чтобы высота footer была как минимум 100px, потому что вы используете фоновое изображение, но вы не хотите чтобы высота была статичной (закрепленной) в том случае, если у вас будет переполнение блока текстом или другим содержимым. Min-height – идеальное решение, но использование его одного не даст необходимой высоты блока. Современные барузеры поддерживают оба понятия. Для IE6 можно использовать следующее «Min-height, min-width, max-height, max-width для IE6».

Шаг вниз

Обычно плавающие объекты могут быть выравнены в горизонтальную линию. Но не в IE6. Каждый следующий блок будет ниже на один уровень, так называемый «stepdown». Для решения этой проблемы используется следующая директива

.box { display:inline
}

Другие примеры решений можете посмотреть здесь preventing stepdown here.

Нет наведения

Самые современные браузеры поддерживают «hover» практически для всех элементов, но не в IE6. IE6 поддерживает только псевдокласс для гиперссылок. Решение для использования ищите здесь: proprietary fix, или просто откажитесь от hover для других элементов.

Отсутствие поддержки альфа-прозрачности в PNG

Частью шутки является то, что Microsoft сам разработал PNG формат, но их браузеры не поддерживают прозрачность (до IE7). Решение для этого нашлось: roundup of different fixes. Помните, что обычные PNG без альфа-прозрачности превосходно работают без фиксов в IE6. Как вариант, вы можете использовать прозрачность 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 окажутся в одной точке. Чтобы это исправить, надо для IE6 задать одно простое, но не валидное условие:

.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, например, тени для блоков и текста, градиенты в фоне и другие вещи.

Если имеется опыт, то верстать под IE6 можно без сложностей. Все проблемы и решения, которые я знаю, буду выкладывать в этой статье.

P.S. Спустя четыре года с момента публикации статьи, когда уже набрался опыта в верстке, могу уверенно сказать - опытный верстальщик должен уметь верстать так, что бы в IE6 ничего не разваливалось. Все решения валидные, есть пара хаков.

Комментарии

#Сергей Макаров29.01.2010 00:07
Спасибо Вам большое, очень сильно помогли!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!Ответить
#PaLyCH02.02.2010 11:55
Не за чтоОтветить

Добавить комментарий

Наверх