Internet Explorer 6 творение человечества, в котором web-стандарты далеко отличаются не только от других браузеров, но и от своих же последних версий. Именно по этим причинам, при создании нового Интернет-ресурса, особенно, если сайт имеет блочную структуру, приходится с особым упорством бороться с проблемами IE 6
Сегодня, это уже не будет секретом, что в Internet Explorer-е достаточно багов, особенно при поддержке стилей (CSS), к тому же на любой вкус и цвет. К тому же, каждый, кто успел малость поверстать, не станет отрицать, что на решение этих проблем отнимает много времени, значительно больше, чем само создание сайта.
Не будем продолжать эту не очень веселую «ноту», перейдем к решениям, поскольку рано или поздно, с этими багами нужно бороться.
Первым, что нужно сделать – это указать DOCTYPE (тип HTML-документа) не забывая о Strict
<!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»>
Strict или Transitional? Здесь уже на любителя. Исходя из свойств, в большинстве случаев используют Transitional, хотя потому, что использование параметра _target в Strict – запрещено.
Повторение последних символов в плавающем объекте , которые часто вылазят на соседний блок, можно устранить с помощью следующих операций:
- в конце плавающего объекта создать дополнительно еще один пустой блок <div> </div>;
- ограничить правилом margin-right: -3px , которое часто используется при создании слайдов;
- использовать для всех плавающих объектов display: inline; Эта запись также станет хорошим решением при удваивании правого/левого отступа ( margin ), что для Internet Explorer 6 является пожалуй самым любимым «занятием».
Хаотичное позиционирование блоков на сайте поможет решить строка следующего содержания — position: relative; , но при этом не стоит забывать о том, что все второстепенные блоки — position: absolute будут позиционироваться относительно этого объекта
Ошибки, которые связаны с редиренгом
, можно решить с помощью свойств hasLayout, что собственно определяет ограничение и расположение какого-то объекта относительно других элементов. hasLayout может принимать какое-то допустимое значение, как например, если необходимо ссылку перевести в блок или же сделать ее прозрачной.
<div>
ПРИВЕТ МИР
<div>это позиционируем абсолютно</div>
</div>
.block {
position: relative; /* для того, чтобы блок с .absolute
позиционировать относительно этого блока */
padding: 20px; /* трабл у некоторых дочерних элементов в IE6 часто
возникает, когда у родителя установлен паддинг */
height: 1%; /* вот оно, спасение для IE6 */
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
}
Представленный пример показывает самое простое использование hasLayout – это ограничение фактических размеров, ширины или высоты ( width/height ), но в тех случаях, где такой шаг не возможен, используем height: 1% .
Следует подчеркнуть, что одновременное использования position: relative и height:1% может послужить решением множество проблем IE
!important или современные селекторы
. Так уж заведено, что Internet Explorer не понимает
min-height
, мало того, что неверно определяет высоту
auto
с помощью 20em
#element {
min-height: 20em;
height: auto !important; /* понимают все современные браузеры */
height: 20em; /* IE6 неправильно использует данное значение */
}
он еще и может увеличить размеры, если контенту необходимо значительно больше места
Как вариант, использование современных селекторов:
#element {
min-height: 20em;
height: 20em;
}
/* IE6 проигнорирует это */
#element[id] {
height: auto;
}
Помним, что при использовании в IE процентных размеров можно столкнутся с целым рядом путаниц и поэтому, если не возможно определить реальные размеры, от процентных – лучше вовсе отказаться.
:hover . Красивые эффекты, которые связаны псевдоклассом :hover в IE 6 работают только вместе с тегом <a> . Если нужно контролировать работу JavaScript-виджетов с помощью клавиатуры, то и в этом случаи также стоить использовать связку с тегом <a> . Правда существуют несколько дополнительных решений, но в данном случаи, лучше всего использовать именно тег <a> .
В завершении отметим, что не прекращаем тестировать Internet Explorer 6. Это не только позволит уменьшит временя на поиск решения, но также сведет к минимальному количеству багов на сайте.
Если есть что-то добавить к представленным вариантам или же указать новые пути, милости просим.