IE quirks mode making page render strange - LI elements not horizontal

问题

I'm having a strange issue with quirks mode in IE 8. I'm working on a web page that is supposed to be rendering a horizontal menu bar. In FF and IE normal mode, it renders perfectly. However, when I set IE to quirks mode, the li elements of the UL render vertically and I'm not sure how to fix it.

Here is the 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;
}

Here is the 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 &amp; Inte</a></li>
        </ul>
    </div><!--end primaryNav-->
<!-- end scripts -->
</body>
</html>

Any ideas? Thanks!!

回答1:

Is it definitely going into quirks mode? I can't see any reason why it would do so.

It might be IE7 compatibility mode -- that's quite a common 'gotcha' issue, as there are some browser settings that can cause it to switch modes without telling you, particularly when you're viewing the site on your local network.

回答2:

Try changing the Doctype to strict. Their are some cases where transitional is in quirks mode while strict is not. Also check if anything is directly above the Doctype (even comments) and remove them.

http://en.wikipedia.org/wiki/Quirks_mode

回答3:

The issue is that you are on an intranet and IE automatically will fall into a compatibility mode unless you tell it to otherwise. Use the X-UA-Compatible header (or the equivalent <meta> tag) should fix the issue:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

来源：https://stackoverflow.com/questions/13146843/ie-quirks-mode-making-page-render-strange-li-elements-not-horizontal

标签

html

css

internet-explorer

quirks-mode