Internet Explorer 9 — новый баг

18 мая 2010 г.

Многие хвалят девятку за скорость обработки скриптов и поддержку html5, CSS3. Первая бета безусловно лучше, чем Preview 4, в частности из-за того, что jQuery полностью корректно в нем работает. Однако в нем еще есть множество багов, в том числе и тех, которых не было в предыдущей версии(Я имею ввиду IE8, а не предшественников беты). Один очень серьезный баг я заметил уже давно и пробовал репортить об этом в Майкрософт, но баг до сих пор не пофиксен.

Суть бага в том, что если поместить в блок(со стилем display:table) ссылки(со стилем display:block и float:left), то на действие hover у родителя сбрасывается display:table. Пример по этой ссылке. Наведите мышкой на любой из красных блоков и в IE9 черная полоса вытянется по всей ширине. Во всех остальных браузерах нормально

Наведите мышкой на любой из красных блоков и в IE9 черная полоса вытянется по всей ширине. Во всех остальных браузерах нормально.

body{background:#fff;}
#header_menu{display:table;}
.black_block{height:20px;background:#000;color:red;text-align:center;}
#top_white_menu{margin:28px 0 0;clear:both;padding:0;}
#top_white_menu a{display:block;height:32px;background:red;padding:5px 7px 1px 5px;margin:0 0 0 6px;float:left;max-
width:135px;outline:none;font-weight:bold;color:#fff;}
#top_white_menu a:hover{background:green;}
<!--[if lte IE 7]><table style="border-collapse:collapse;"><tr><td style="padding:0;border:0;"><![endif]-->
<div id="header_menu">

<div class="black_block">IE9 bugs</div>

<div id="top_white_menu">
<a href="/1">Link 1</a>
<a href="/2">Link 2</a>
<a href="/3">Link 3</a>
<a href="/4">Link 4</a>

<a href="/5">Link 5</a>

</div>
</div>
<!--[if lte IE 7]></td></tr></table><![endif]-->

Если действие :hover из css убрать, то бага не будет. Также баг пофиксится, если ссылкам присвоить display:table. Суть не в том, что этот баг легко пофиксить, а суть в том, что новому якобы современному браузеру приходиться делать костыли.

P.S. В условных комментариях добавил таблицу чисто для IE6-7. Код был кроссбраузерным, пока не появился IE9. Doctype в режиме Strict

 

Теги:
рубрика Сайтостроение