Question

我正在创建一个带有固定标题的网站。以下代码在Chrome和Firefox中运行良好，但IE9（可能还有早期版本）忽略margin-top的{{1}}，使其显示在.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>

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

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

Answer 1

简单地给浮动：左;课堂内容。

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

肯定它会起作用，永远不会忘记在标题中给出charset声明，它只是喜欢下面。

<meta charset='utf-8'>

修复了IE9中的头文件错误？

1 个答案: