我在 IE 8 中遇到了一个奇怪的怪癖模式问题。我正在处理一个应该呈现水平菜单栏的网页。在 FF 和 IE 正常模式下,它可以完美呈现。但是,当我将 IE 设置为 quirks 模式时,UL 的 li 元素会垂直渲染,我不知道如何修复它。
这是CSS:
#primaryNav {
background:url(/images/sprite_primary_nav.gif) repeat-x;
border:1px solid #dfdfdf;
clear:both;
height:49px;
margin:0 auto;
width:985px;
}
#primaryNav ul {
list-style: none;
margin:0;
}
#primaryNav ul li {
border-left:1px solid #dfdfdf;
display:list-item;
float:left;
height:49px;
padding-bottom:0px;
}
#primaryNav ul li a {
border:1px solid #ffffff;
color:#333333;
display:block;
font-family:ScalaOTRegular, "Times New Roman", Arial;
font-size:123.1%;
height:32px;
padding:15px 23px 0px;
text-decoration:none;
}
#primaryNav ul li a.afterActive, #primaryNav ul li a.firstNavItem {
border-left:0px;
}
#primaryNav ul li.active a {
background:url(../images/sprite_primary_nav.gif) repeat-x 0px -49px;
}
#primaryNav ul li:first-child {
margin-left:41px;
}
#primaryNav ul li:last-child {
border-right:1px solid #dfdfdf !important;
}
.primaryNavLast {
border-right:1px solid #dfdfdf !important;
}
这是html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/css/delta_screen.css" media="screen"/>
<script src="scripts/jquery-1.6.4.min.js"></script>
</head>
<body>
<div id="primaryNav" class="addShadowShadowPrimaryNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Etiamn</a></li>
<li><a href="#">Integer</a></li>
<li><a href="#">Rhoncus</a></li>
<li><a href="#">Sagittis</a></li>
<li><a href="#">Facilisis & Inte</a></li>
</ul>
</div><!--end primaryNav-->
<!-- end scripts -->
</body>
</html>
有任何想法吗?谢谢!!