html - CSS header div 在 IE 中不会左对齐，但在 Chrome 和 Firefox 中有效

我有以下 asp.net 页面，顶部有一个固定标题，宽度为 100%。底层内容居中对齐并在标题下方滚动。

这在另存为文件并在 Firefox 和 Chrome 中打开时非常有效，但在 IE9 中不起作用。在 IE9 中，标题将所有内容左对齐？

带 CSS 的完整页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    <style>

    #header {
        margin: 0;
        padding-top: 5px;
        height: 25px;
        width: 100%;
        background-color: orange; /*#E1E1E0;*/
        position: fixed;
        z-index: 1000;
    }

    .header_link {
        float: right;
        margin-top: 3px;
        margin-right: 15px;
        cursor: pointer;
        color: #284E98 !important;
        font-size: small;
    }


    .content {
        width: 900px;
        margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: red; /* added to show problem */
    }   

    </style>



    <div id="header">
        <a href="./About.aspx" class="header_link" onclick="return hs.htmlExpand(this, { objectType: 'ajax' })">About</a>       
        <a href="./Default.aspx" class="header_link">Home</a>
    </div>

    <div class="content">
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>  
    </div>

    </form>
</body>
</html>

最佳答案

您需要有一个 <!DOCTYPE>在所有 HTML 页面的顶部。

没有它，IE 将进入 Quirks 模式，这将导致各种 CSS 错误。

将有效的文档类型添加到您的页面。如果您不确定要使用哪种文档类型，最好的选择是 HTML5 文档类型: