CSS-заголовок div не выравнивается по левому краю в IE, но работает в Chrome и Firefox

У меня есть следующая страница asp.net с фиксированным заголовком вверху с шириной 100%. Основной контент выравнивается по центру и прокручивается под заголовком.

Это прекрасно работает при сохранении в виде открытого файла в Firefox и Chrome, но не работает в IE9. В IE9 заголовок все выравнивает влево?

Смотрите JSFiddle

Полная страница с 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>
Источник

1 ответ

Решение

Вам нужно иметь <!DOCTYPE> вверху всех HTML-страниц.

Без этого IE перейдет в режим Quirks, который вызовет все виды ошибок CSS.

Добавьте действительный тип документа на свою страницу. Если вы не уверены, какой тип документа использовать, лучшим вариантом будет тип документа HTML5:

<!DOCTYPE html>

Просто как тот.

Надеюсь, это поможет.

Источник
Другие вопросы по тегам