3

我正在创建一个带有固定标题的网站。以下代码在 Chrome 和 Firefox 中运行良好，但 IE9（可能还有早期版本）会忽略 的margin-top，.container使其出现在.header(= 贴在页面顶部) 的后面。

<!DOCTYPE html>
<html>
    <head>
        <style>
        .header {
            height: 100px;
            width: 100%;
            background: transparent;
            border: 5px solid green;
            position: fixed;
            top: 0;
            left: 0;
        }

        .content {
            height: 200px;
            width: 100%;
            background: orange;
            margin-top: 110px; /* IE ignores this */
        }
        </style>
    </head>
    <body>
        <div class="header">Header</div>

        <div class="content">Content.</div>
    </body>
<html>

奇怪的是，如果我切换标题和内容......

    <body>
        <div class="content">Content.</div>

        <div class="header">Header</div>
    </body>

... IE9 正确呈现页面（与其他浏览器一样）。

我想避免这种情况，因为它破坏了文档的逻辑顺序。有什么建议么？

4

1 回答 1

1

简单地给出 float:left; 到课堂内容。

    .content {height:200px;width:100%;background:orange;margin-top:110px;
float:left;}

它肯定会起作用，并且永远不会忘记在标题中为 ie 提供字符集声明，它就像下面一样。

<meta charset='utf-8'>
于 2013-06-10T11:45:05.997 回答