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”作为类，然后在CSS中将“nav”更改为“.nav”，IE似乎很高兴。你可以在这个jsFiddle中看到它的实际效果：

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

如果由于其他原因仍然需要标记，看起来您可以在之前和之后将HTML包装在小提琴中，它仍然可以在IE中正确显示 - 只是不要在CSS规则中使用nav。我不确定为什么 - 只是报告我在实验中发现的东西。

具有嵌套块级元素的Div在IE7中失去样式

1 个答案: