Существует множество вопросов и сообщений на форуме, касающихся поведения IE7 с абсолютно позиционированными элементами. Из дюжины или около того, что я прочитал, ни один из содержащихся в них советов не помог в моей конкретной ситуации. Я начинаю задаваться вопросом, не потому ли это, что я использую заточку HTML5. Несмотря на это, я надеюсь, что кто-то может понять поведение, которое я вижу.
Firefox 5, Safari 5, Chrome 12, IE8/9 
Internet Explorer 7 
В двух словах, вы наводите курсор на один из пунктов навигационного меню, он раскрывает div с расширенным меню, бла-бла-бла-бла... Скрытый div позиционируется абсолютно, однако в IE7 он привязывается к краю пункта меню, который вы выделяете. . В других местах он правильно отображается под ним.
Я использую remy's HTML5 shiv. Я включаю CSS для «блокировки» следующих элементов: header, nav, article, footer, section, aside, figure и figcaption.
Вот соответствующий HTML и CSS:
<nav>
//other nav divs
<div id="kb">
<a href="/kb/"><span>knowledge base</span></a>
<div id="kb_expand" class="nav_expand">
<div>
//more options...
<section>
<h2><a href="">Exchange</a></h2>
<ul>
<li><a href="">Exchange Setup</a></li>
<li><a href="">Calendar Basics</a></li>
<li><a href="">Calendar Sharing</a></li>
<li><a href="">Resources</a></li>
</ul>
</section>
//more options...
</div>
</div>
</div>
//other nav divs
</nav>
nav{float:right;margin-top:-26px;text-align:right;width:945px;padding:9px 0 10px}
nav > div{display:inline;padding:8px 0 11px}
.nav_expand{display:none;position:absolute;background:url('images/shadow-south.png') repeat-x bottom;padding-bottom:7px}
.nav_expand div{text-align:left;background:url('images/nav-background.png') repeat-y;width:925px;padding:5px 10px 10px;color:#FFF;margin-top:10px;overflow:hidden}
Я ценю любое понимание, которое может предоставить любой! Спасибо!
