css - 水平导航在 IE 中不起作用，但在 FF 和 Chrome 中看起来不错

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

您正在尝试设置 IE9 之前的 IE 版本无法识别的 HTML5 元素(在本例中为 nav 元素)的样式。如果您觉得必须设置这些元素的样式，请使用 html5 shim:

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

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