понедельник, 10 декабря 2012 г.

Internet Explorer 6/7 - баг маркеров элементов нумерованного (OL) и маркированного (UL) списка с параметром HEIGHT

Прежде всего поздравляю всех, что ие6 все меньше и меньше поддерживается. С 13 марта youtube перестает поддерживать ie6. УРА!!! Эту заметку написал мой коллега по интернет цеху, если что ник jb в комментариях. Далее прямая речь:
Недавно под конец рабочего дня доверстывая проект наткнулся на довольно забавный (кх - кх) баг ИЕ6 и ИЕ7, оказываеться если элементу нумерованного списка (OL LI) или маркированного списка (UL LI) задать CSS св-во HEIGHT, то маркеры этих списков не будут увеличиваться 1, 2, 3... и тд., а будут постоянно равны 1, помогает только задача VALUE, причем его нужно задавать для каждого элемента списка.


Это видно на выделенных примерах 4 и 7 под ие6 и ие7, причем элементы без VALUE имеют маркер 1, хотя должны были бы иметь 8, так как предыдущий элемент имеет значение 7.
Откройте этот пример для сравнения в ие6/ие7 и нормальном браузере:) Firefox, Opera, Safari, Chrome.
Вернемся к истокам проблемы, использовать HEIGHT для элементов списков мне понадобилось чтобы задать им специфическое для ие свойство hasLayout а писать не валидное zoom:1; не очень то хотелось, но видимо вывод таков что стоит использовать zoom:1; с условными комментариями нежели казалось бы безобидный HEIGHT:1%; (кстати величина процента не влияет на баг):
 
<!--[if lt IE 8]>
  <style type="text/css">
    .zoom {
      zoom: 1;
    }
  </style>
<![endif]-->
 
Вообщем всем спасибо за внимание, предупреждены - значит вооружены, удачной верстки, что есть hasLayout можно почитать здесь ;)

Комментариев нет:

Отправить комментарий