заработок вебмастеру

Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов
Показаны сообщения с ярлыком bug. Показать все сообщения
Показаны сообщения с ярлыком bug. Показать все сообщения

четверг, 2 июля 2009 г.

Проблемы с абсолютным позиционированием в MSIE6

На практике приходится постоянно сталкиваться с двумя багами абсолютного позиционирования в 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

... а что дальше?

понедельник, 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]-->

... а что дальше?