Чудотворный ИЕ

Все, кто когда либо верстал или имел дело с версткой сайтов, сталкивались с кроссбраузерностью. И ни для кого не будет секретом, что семейство ИЕ браузеров это обуза «общества». Очень часто этот браузер вызывает головную боль и серьезные проблемы у верстальщиков.

Поэтому хочу привести некоторые примеры, хаки или заплатки (называйте это как хотите) которые, немного Вам помогут (очень в это надеюсь).

И так, IE критически важно правильно объявить DOCTYPE тот, который вы будете дальше использовать.
для HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

или например, для XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"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 */ 
}

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

VESELOV.SUMY.UA

Чудотворный ИЕ