Оптимизация верстки для IE7

29 Дек
2011

Всех с наступающим новым годом и доброго времени суток. Недавно откопал свои заметки, где записывал проблемы верстки под IE7, и решил поделиться. Не думаю что этот пост будет полезен опытному верстальщику, но человеку недавно вставшему на нелегкий путь верстки будет полезно прочитать про проблемы совместимости с нашим любимым осликом.



display:inline-block:
Знакомая всем верстальщикам проблема. Дело в том, что осел (IE), вплоть до 7й версии отказывается воспринимать этот параметр. Решает проблему задания в свойствах:
{
display:inline-block;
*display:inline; /*Стиль обрабатывается только в IE*/
zoom:1; /*Включает в IE hasLayout*/
}


Неправильно работающий z-index:
Проблема с z-index не так часто встречается, но тоже достойна обсуждения. Т.к. IE6-7 версии, в отличие от нормальных браузеров, учитывает z-index своего родителя, то для нормальной работы этого параметра нужно задать родительскому элементу z-index:0; Остальные браузеры по умолчанию ставят всем элементам z-index:auto, что эквивалентно z-index:0.

Селектор *, его применение и недостатки.
Это базовый селектор, позволяющий выбрать всех потомков родителя. По сути свой он бесполезен и даже вреден, т. к. проходя по каждому элементу DOM, он сильно тормозит отработку стилей. Чаще всего его используют для того, что бы css правило было обработано только в IE 6-7 версии.

Box-shadow, border-radius, liner-gradient:
Необходимость извращаться с закругленными углами и тенями вокруг блоков теперь может вас не волновать, для правильного отображения этих свойств появился замечательный костыль — PIE. Вот пример использования:
{
border-radius: 5px; /*Закругляем углы*/
box-shedow: 1px 1px 1px 0px #ccc; /*Добавляем тень блоку*/
behavior:url(PIE.php); /*Подключаем PIE*/
}

Теперь даже в уродце IE можно увидеть плавные углы и красивые тенюшечки без лишних телодвижений 🙂
Есть несколько недостатков этого способа например:

  • PIE не всегда правильно работает с объектами со сложным графическим фоном.
  • Тормозит загрузку страницы(чем больше «украшательств», тем больше тормоза)
  • Невозможно использовать при динамичном отображении контента(:hover например), из за слишком медленной обработки это выглядит не кошерно.


Border-spacing:
Нормальные браузеры позволяют задать расстояние между ячейками таблицы с двумя параметрами — горизонтальные и вертикальные отступы, но IE7 в состоянии понять только один параметр, которые он задает для обоих отступов.

Селектор :last-child
В спецификации CSS2 есть псевдоклассы :first-child и :last-child, все браузеры спокойно поддерживают оба псевдокласса, но вот осел (видимо в целях экономии) поддерживает только один — :first-child.
Эту проблему можно решить с помощьюно мне кажется что проще избегать ситуаций, где это необходимо. JS,

Свойство overflos:hidden:
Проблема заключается в том, что если вам нужно спрятать за пределами блока потомок с position:relative, IE проигнарирует overflow:hidden и элемент останется видимым.
Проблема решается, если задать родителю position:relative.

Еще один хак для IE7 “//”:
Комментарий // стоящий перед css правилом, скроет это правило от всех браузеров, кроме IE7. Преимущество этого хака перед “*” в том, что он не тормозит загрузку страницы, т.к. ему не приходится проходиться по всему DOM перед тем, как использовать нужное правило стилей.

Всем спасибо за внимание, надеюсь что вы поможете дополнить этот список своими замечаниями.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх