На практике приходится постоянно сталкиваться с двумя багами абсолютного позиционирования в IE6. Обе проблемы вызваны свойством position:relative у родительского блока (когда мы хотим абсолютно позиционировать блок относительно этого родителя а не документа).
Проблема номер один — когда рядом с родительским блоком находится какой то блок с position:relative и как не выставляй z-index абсолютно позиционированному блоку, он никак не отобразится по верх него. проблема решается установкой z-index родителю (если соседний с родителем блок имеет такие же стили, то z-index у них должен отличатся), ну и стараться использовать position:relative только когда оно действительно нужно. Проблема состоит в том что ИЕ сравнивает не только z-index блоков, но и z-index их родителей и их последовательность. И родительский считается им важнее. То есть если есть два блока с position reletive и z-index 10, и у одного из них есть вложенный блок c position absolute и z-index 20, то отображаться поверх другого блока он будет только в том случае если родительский блок находится в коде позже. Если же на оборот то поверх абсолютно позиционированного блока будет отображаться блок который идёт позже, хоть у него и такой же z-index как у родителя.
Я всегда стараюсь обходит стороной, если надо выводить кучу элементов у которой при каком-то событии должен появляться абсолютно позиционированный относительно елемента блок, то родителю назначаю position:relative тоже по событию.Как я уже говорил "ну и стараться использовать position:relative только когда оно действительно нужно", а то я иногда встречал записи такого вида *{position:relative}
Вторая проблема, это когда у родительского блока стоит обтекание (float:left; или float: right), тогда с абсолютно позиционированным блоком происходит не понятная вещь - или он вообще пропадает из виду (наверное его выкидывает за пределы окна) или он позиционируется относительно всего документа. С этим багом я боролся разными методами (куча игр с hasLayout) но решение найденyое методом тыка clear:both меня очень удивило. Но самое главное &mdash это работает.
Удачи в борьбе с MSIE
... а что дальше?
Показаны сообщения с ярлыком bug. Показать все сообщения
Показаны сообщения с ярлыком bug. Показать все сообщения
четверг, 2 июля 2009 г.
понедельник, 27 октября 2008 г.
Учим IE нормальному CSS
Наверное немногие знают о таких селекторах как например button[type=submit], кто знает, тот всё равно не использует, так как IE всё равно игнорирует (и приходится создавать класс для кнопки, например .btn). position:fixed... могу поспорить многие скривились, вспоминая екпрешн для IE6. Прозрачные .png, двойной margin у плавающих (float) контейнеров, двойные классы (.class1.class2)... перечислять баги и то что не умеет IE можно долго. И всё уже давно с этим смирились... Но давайте дадим нормальному CSS второй шанс. Есть замечательный скрипт, который поможет одним махом научить IE css, и пофиксить известные баги. Встречайте Лекарство для MSIE.
Вот небольшой список того что он умеет делать:
Думаете это всё? нет мне просто лень всё перечислять. Полный список вы можете посмотреть сами
Всё что нужно для работы, всего лишь подключить скрипт. (даже не обязательно качать)
... а что дальше?
Вот небольшой список того что он умеет делать:
- parent > child
- adjacent + sibling
- .multiple.classes
- :hover (да да, теперь hover можно присваивать любым элементам)
- :first-child
Думаете это всё? нет мне просто лень всё перечислять. Полный список вы можете посмотреть сами
Всё что нужно для работы, всего лишь подключить скрипт. (даже не обязательно качать)
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
... а что дальше?
Тэги:
bug,
IE,
IE6,
IE7,
javascript,
msie6,
msie7,
position:fixed;
Подписаться на:
Сообщения (Atom)