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

时间:2013-06-07 21:55:15

标签: css internet-explorer position

我正在创建一个带有固定标题的网站。以下代码在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正确呈现页面(与其他浏览器一样)。

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

1 个答案:

答案 0 :(得分:1)

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

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

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

<meta charset='utf-8'>