我正在创建一个带有固定 header 的网站。以下代码在 Chrome 和 Firefox 中运行良好，但 IE9(可能更早版本)忽略了 .container 的 margin-top，使其出现在 后面.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 正确呈现页面(与其他浏览器一样)。
我想避免这种情况，因为它会破坏文档的逻辑顺序。有什么建议吗？
最佳答案
简单地给出 float:left;到类内容。
.content {height:200px;width:100%;background:orange;margin-top:110px;
float:left;}
肯定会起作用，并且永远不会忘记在标题中为 ie 提供字符集声明，如下所示。
<meta charset='utf-8'>
关于css - 修复了 IE9 中的标题错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16993562/