CSS绝对定位bug与IE9

问题描述

我有一个IE9和绝对定位的问题。我试图发布在JSfiddle，但在IE中有圆角，即使我使用CSS3 IE不支持，有我建议JSfiddle它的引擎。换句话说，它显示精细的一切，但在IE9，它忽略顶部边距，只是到屏幕上。

I have a problem with IE9 and absolute positioning. I tried to post it in JSfiddle, but there are rounded corners in IE even I am using CSS3 that IE doesn't support, that having me suggest that JSfiddle have its on engine. In other words it is showing fine everything, but in IE9, its ignoring top margin and just comes up to the screen.

我的建议是复制/粘贴在你的编辑器并尝试在IE9。感谢。

My suggest is to copy/paste it in your editor and try in IE9. Thanks.

此处：

<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;
}

推荐答案

。

强制用户使用最佳渲染引擎使用 x-ua-compatible 作为标题或您网页上的元html标记。

To force your users to use the best rendering engine use x-ua-compatible as a header or in a meta html tag on your page.

这里你可以找到图标，如果它是蓝色的，这意味着兼容模式被激活，已在IE9中激活

Here you can find the icon, if it's blue it means compatibility mode is activated, so mine is activated in IE9 http://imgur.com/BPDq3

这篇关于CSS绝对定位bug与IE9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！