Все, кто когда либо верстал или имел дело с версткой сайтов, сталкивались с кроссбраузерностью. И ни для кого не будет секретом, что семейство ИЕ браузеров это обуза «общества». Очень часто этот браузер вызывает головную боль и серьезные проблемы у верстальщиков.
Поэтому хочу привести некоторые примеры, хаки или заплатки (называйте это как хотите) которые, немного Вам помогут (очень в это надеюсь).
И так, IE критически важно правильно объявить DOCTYPE тот, который вы будете дальше использовать.
для HTML:
"http://www.w3.org/TR/html4/strict.dtd">
или например, для XHTML:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Так же, установка position:relative для элемента, может решить множество проблем, в частности это решает проблему невидимости части блока, например фон в блоке обрезается, или склеивания блоков. Есть еще один нюанс использования position:relative, но он относится к верстке справа налево direction:rtl; или dir:rtl;. Суть проблемы в том, что дочерние элементы в контейнере с относительным позиционированием могут произвольно смещаться, позиционироваться со смещением.
Элементы со свойством float в IE 6 подвержены известному багу двойного margin, например, вы указываете слева margip: 5px, а в IE 6 получаете 10px. display:inline решит эту проблему, и при этом ваш CSS останется валидным!
Использовать нужно только теги «а» для кликабельных элементов или элементов со свойством :hover. IE6 может применять псевдокласс :hover только тегов «a» -(
Есть возможность написать код, конкретно работающий в IE6, не прибегая к традиционным хакам или условным комментариям. Например, минимальная высота может быть определена с помощью кода:
#element {
min-height: 20em;
height: auto !important; /* все браузеры */
height: 20em; /* IE использует это свойство, так как не понимает min-height и !important, и при превышении высоты свободно тянется /*
}
Другой вариант заключается в использовании современных селекторов, например:
#element {
min-height: 20em;
height: 20em;
}
/* ignored by IE6 */
#element[id] {
height: auto;
}
ИЕ не очень хорошо ладит с процентами. Если вы не можете точно определить размер каждого родительского элемента, лучше всего избегать размеров в процентах. Вы можете использовать процентные значения в других браузерах !important, например:
body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}
Ну и главное, проверяйте код на начальных этапах в говнобраузере. Да прибудет с Вами сила!
