IE9 的 CSS 绝对定位错误

Question

我对 IE9 和绝对定位有疑问。我试图将其发布在 JSfiddle 中，但即使我使用 IE 不支持的 CSS3，IE 中也有圆角，这让我建议 JSfiddle 在引擎上有它。换句话说，它显示了一切，但在 IE9 中，它忽略了上边距，只出现在屏幕上。

我的建议是将其复制/粘贴到编辑器中并在 IE9 中尝试。谢谢。

代码可以在这里看到

在这里：

<div id="container">
<div id="branding">
branding
</div>
<div id="content">
<div id="content_main">
<p>Ovo je neki tekst. Ovo je neki tekst. Ovo je neki tekst. Ovo je neki tekst. Ovo je neki tekst. Ovo je neki tekst.</p>
</div>
<div id="content_sub">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
<div id="site_info">
<p>Ovo je neki tekst. Ovo je neki tekst. Ovo je neki tekst.</p>
</div>
</div>


body{
font: 76%/160% Tahoma, Verdana, Arial, sans-serif;
color: #5a1c46;
text-align: center;

}


div#container{
width: 780px;
margin: 0 auto;
padding: 0;
text-align: left;

}


div#branding{
/*when its display: none it is displaying correctly content*/
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-color: #009;

}


div#content{
position: relative;
width: 100%;
overflow: auto;
margin-top: 200px; /*this margin is ignoring while branding is visible*/
min-height: 500px;
background-color:#F00;

}


div#content_main{
position: absolute;
top: 0;
left: 240px;
width: 540px;
margin: 0;
padding: 0;

}


div#content_sub{
position: absolute;
top: 10px;
left: 15px;
width: 190px;
margin: 0;
padding: 10px;
border-radius: 10px 30px 10px 30px;
background-color:#Ff0;

}


div#site_info{
margin: 0;
padding: 0;
min-height: 50px;
border-radius: 0 0 20px 20px;
width: 100%;
background-color: #FF0;
}

Answer 1

您的浏览器处于兼容模式。把它关掉，看起来就很好了。

要强制用户使用最佳渲染引擎，请使用 x-ua-company 作为标题或页面上的元 html 标记。

在这里你可以找到图标，如果是蓝色则表示兼容模式已激活，所以我的在 IE9 中已激活 https: //i.sstatic.net/RXE14.jpg

Answer 2

此类问题是由兼容模式引起的

要在 IE9 中编辑兼容模式设置：

1. alt+t >兼容性视图设置
2. 清除所有网站并取消选中所有框。

现在您的浏览器将不会进入兼容模式（除非网站使用 强制它）