Блог divbyzero

Наболевшие CSS баги в IE6

8 февраля 2010 года | Вёрстка, Мысли

Несомненно IE6 был лидером в поддержке всех свойств CSS в далёком 2001 году, а это почти 9 лет назад! И сегодня он хоть и потерял свою популярность, но процент его использования ещё не настолько мал, чтобы полностью его игнорировать. Мне как и многим другим разработчикам, до сих пор присылают письма, с текстом жалобы, что некрасиво отображается или вообще что-то не работает в их любимом браузере IE6.

Хоть и в большинстве своих проектов, поддержку старья свожу к минимуму, все равно полностью отказаться не могу. Да и заказчик желает «удовлетворить» всех посетителей.

Напомню всех основные проблемы IE6, и надеюсь, что в ближайшем будущем, я вместе с вами буду улыбаться и радоваться, что нет больше таких проблем. Поехали:

Коробочная модель (Блочная модель)

Это, наверное, самая распространенная и самая назойливая «болячка» IE6 и младшеньких (хоть они уже и покоятся с миром). Допустим вы оформляете блок следующим образом:

Современные браузеры выделят 124px на всю ширину блока (2px + 10px + 100px + 10px + 2px). А наш любимый старичок IE6 задаст только 100px на всё (и границы, и отступы), и сожмет содержимое внутри.

Согласитесь, такие расчёты могут не слабо поломать всю структуру вёрстки. В какой-то мере, может даже показаться, что действия IE логичны, но нет, они не соответствуют правилам спецификации W3C.

Чтобы решить данную проблемы, можно добавить внутрь нашего блока новый слой div и ему применить нужные отступы, вместо главного блока. Или просто изменять отступы для внутренних элементов, при этом отказавшись от границ и отступов основного блока.

Двойной отступ

Сразу начну с примера, допустим нам нужно прижать блок вправо, и добавим отступ в 20px:

IE6 увеличит отступ в два раза. Сделает его равным 40px, вместо требуемых 20px. Опять же, это может поломать весь макет страницы. Об этом баге также все знают, и придумали исправление. Нужно добавить свойство display: inline; в наш div. Хотя это решение не совсем приемлемое, так как inline-элементу нельзя задать ширину.

Поэтому, если вам действительно нужно добавить отступ, то лучше пользуйтесь обвёрткой в которой и укажите нужный отступ. А может у вас есть своё решение данной проблемы?

Нет min/max-width/height

Установка минимальной (максимальной) ширины (высоты), является обычным и логичным свойством, но опять же из-за нашего IE6 приходится отказываться от использования либо применять хаки. Стоит заметить, что эксплорер не просто неправильно считает эти свойства, он их игнорирует. Правильнее сказать — не поддерживает.

А ведь это такое полезное свойство. Например нам нужно, чтобы футер был не менее 100px высотой, и при этом увеличивался, если количество контента в нём превосходило его границы. Для такого как раз и предназначено свойство min-height.

Как же лечить эту ошибку. В данном случае решение есть. Так как свойство height в IE6 имеет особый пересчет, то можно в отдельном файле стиле указать для блока просто высоту блоку. И она будет увеличиваться при наполнении контентом.

Замечание: Если прописать высоту в основном стиле, то в современных браузерах блок тянуться не будет.

Вот такой своеобразный хак для IE6.

Hover-события

Современные браузеры поддерживают hover-событие для каждого элемента, но, как уже догадались, не IE6. Браузер IE6 поддерживает только псевдо-класс :hover для тега <a> с обязательным присутствием атрибута href.

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

Отсутствие поддержки полупрозрачности в PNG24

Главная проблема, это отображение полупрозрачности в PNG24. С обычной прозрачностью IE6 справляется, иногда, даже лучше чем с GIF. А вот для борьбы с правильным отображением полупрозрачности у меня собран целый архив, скриптов и разнообразных фиксов.

Но вот, недавно наткнулся на полезный фикс-скрипт DD_belatedPNG, который теперь использую у себя в блоге. Какие же у него преимущества:

• Маленький размер (~7 кбайт), для пользователей старья думаю не помеха.
• Всего один скрипт, без использования behavior в стилях.
• Удобство перечисления тегов, которые нужно обработать.

Добавлять ссылку на скрипт нужно, через условные комментарии:

<!--[if lt IE 7]> Инструкции для IE 5.0, 5.5 или 6 <![endif]-->

Подведу итоги

Можно сказать, что все основные проблемы в IE6 решаемы, или частично решаемы. А моей главной философией, это создание сайтов на новейших технологиях, но при этом старые браузеры должны умеренно отображать подобие макета, пусть и без «плюшек и рюшечек».