Div с вложенными блочными элементами теряет стиль в IE7

Question

Я создаю сайт с использованием 960gs и своего собственного стиля. Мое навигационное меню использует этот код:

<nav class="push_1">
                        <div class="grid_2 alpha"><span>About</span><a href="#" title="About"></a></div>
                    <div class="grid_2"><span>Services</span><a href="#" title="Services"></a></div>
                    <div class="grid_2"><span>Projects</span><a href="#" title="Projects"></a></div>
                    <div class="grid_2"><span>Client Stories</span><a href="#" title="Client Stories"></a></div>
                    <div class="grid_2"><span>Contact</span><a href="#" title="Contact"></a></div>
            </nav>

А это CSS:

.container_12 .grid_2 {width:140px; display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px;}
nav{background:#666; z-index:2; font-family:tahoma, helvetica, sans-serif; font-weight:bold; letter-spacing:1px; overflow:hidden}
nav div{position:relative; background:url(http://placehold.it/140x250/z03); height:250px; display:inline-block }
.interior nav div{height:50px}
nav div span{display:block; background-color:#111; color:#fff; padding:.3em 0; text-align:center; border-bottom: 2px solid #777;opacity:.9}
nav div a{display:block; position:absolute; top:0; height:100%; width:100%; z-index:5}

Что отлично работает в Firefox, но с треском проваливается в IE7, где появляется только текст в элементах <span> и все остальные стили теряются. Я столкнулся с этой же проблемой, когда пытался использовать <li> предметов вместо divs. Любопытно, что тот же код не показывает проблем в IE7, когда высота nav div установлена ​​на 50 пикселей, как на страницах с class="interior на теле. На этой странице действует HTML5-шим. Я пробовал искать в различных известных ошибках IE7, но не смог найти ту, которая полностью соответствовала бы моей проблеме. Если у кого-нибудь есть какие-либо предложения, я буду очень признателен.

Answer 1

В IE8 я мог бы повторить проблему.Я обнаружил, что это были теги, которые запутали это.Если я изменил их на и добавил «nav» как класс в эти div, а затем изменил «nav» на «.nav» в CSS, IE, похоже, будет счастлив.Вы можете увидеть это в действии здесь в этом jsFiddle:

http://jsfiddle.net/jfriend00/Vz85f/

Если вы все еще хотите использовать теги по другим причинам, кажется, что вы можете обернуть HTML в скрипте дои впоследствии, и он все равно будет отображаться в IE - просто не используйте nav в правилах CSS.Я не уверен почему - просто сообщаю, что я нашел экспериментально.