Question

我一直在查看css代码很长一段时间并尝试了很多次来获取此页面：http://appraisalline.com/chicagoappraisals/在IE中正确呈现但无济于事。我试图解决的css代码是：

nav {
padding: 0px 0px 3px 0px;
width: 100%;
height: 50px;
overflow: hidden;
}

nav ul {
background: url(../images/nav-li-bg.gif) right top no-repeat;
height: 50px;
overflow: hidden;
float: left;
}

nav ul  li {
font-size: 13px;
line-height: 24px;
float: left;
background: url(../images/nav-li-bg.gif) 0 0 no-repeat;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left: -2px;
}

nav ul li a {
color: #fff;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-transform: uppercase;
position: relative;
font-weight: bold;
margin: 0 0px 0 0;
}

nav ul li a span {
background: none;
display: inline-block;
padding: 0px 6px 0 6px;
}

nav ul li a span span {
background: none;
padding: 13px 17px 13px 16px;
}

nav ul li a:hover, nav .active {
background:url(../images/nav-left.gif) left top no-repeat;
color:#fff;
}

nav ul li a:hover span, nav .active span {
background:url(../images/nav-right.gif) right top no-repeat;
}

nav ul li a:hover span span, nav .active span span {
background:url(../images/nav-tail.gif) 0 0 repeat-x;
}

nav .first {margin: 0;}

对于为什么不渲染的任何和所有帮助表示赞赏。谢谢！

Answer 1

你试图设计HTML5元素（在本例中为nav元素），IE9版本之前的IE版本不明白。如果您觉得必须设置这些元素的样式，请使用html5垫片：

http://code.google.com/p/html5shim/

在我看来，短期内更好的解决方案不是直接设置新元素的样式，而是设置其他元素的样式，只使用HTML5元素进行语义结构。垫片正在做的是使用javascript创建元素，然后允许在不理解元素的浏览器中将css规则应用于它们。

Answer 2

首先突然出现的是你正在使用的HTML5导航标签肯定不适用于旧版本的IE。在IE9中正常工作。

如果你关心IE，那么简单地使用div来实现向后兼容可能是最容易的。

在IE和Chrome中，在IE中无效的水平导航效果很好

2 个答案: