Не прошло еще и недели, как вышла первая бета IE9. Многие хвалят девятку за скорость обработки скриптов и поддержку html5, CSS3. Первая бета безусловно лучше, чем Preview 4, в частности из-за того, что jQuery полностью корректно в нем работает. Однако в нем еще есть множество багов, в том числе и тех, которых не было в предыдущей версии(Я имею ввиду IE8, а не предшественников беты). Один очень серьезных баг я заметил уже давно, писал о этом сюда и его даже добавили в песочницу, но оформил я его тогда не лучшим образом из-за спешки. Также пробовал репортить об этом в Майкрософт, но баг до сих пор не пофиксен.
Суть бага в том, что если поместить в блок(со стилем display:table) ссылки(со стилем display:block и float:left), то на действие hover у родителя сбрасывается display:table. Пример по этой ссылке. Наведите мышкой на любой из красных блоков и в IE9 черная полоса вытянется по всей ширине. Во всех остальных браузерах нормально.
Код:
CSS:
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;}
HTML:
<!--[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
Суть бага в том, что если поместить в блок(со стилем display:table) ссылки(со стилем display:block и float:left), то на действие hover у родителя сбрасывается display:table. Пример по этой ссылке. Наведите мышкой на любой из красных блоков и в IE9 черная полоса вытянется по всей ширине. Во всех остальных браузерах нормально.
Код:
CSS:
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;}
HTML:
<!--[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