带有嵌套块级元素的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时，我遇到了同样的问题。奇怪的是，当nav div的高度设置为50px时，相同的代码在IE7中显示没有问题，因为它是在class="interior设置在主体上的页面上。HTML5在这个页面上生效。我试着搜索了各种已知的IE7漏洞，但没有找到一个与我遇到的问题完全匹配的。如果有人有什么建议，我将不胜感激。

Answer 1

在IE8中，我可以重复这个问题。我发现是标签混淆了它。如果我把这些改成并在div上添加"nav"作为类然后把"nav"改成。的CSS, IE似乎很高兴。你可以在jsFiddle:

中看到它的作用http://jsfiddle.net/jfriend00/Vz85f/

如果出于其他原因你仍然想要标签，看起来你可以把HTML包装在之前和之后，它仍然会在IE中正确显示——只是不要在CSS规则中使用导航。我不知道为什么——只是报告我的实验发现。