CSS絕對定位問題與IE9

Question

我有一個問題，IE9和絕對定位。我試圖在JSfiddle中發佈它，但IE中有圓角，即使我使用IE不支持的CSS3，也就是說我建議JSfiddle使用它的引擎。換句話說，它顯示了一切，但在IE9中，它忽略了頂部邊界，並且只是出現在屏幕上。

我的建議是將其複製/粘貼到您的編輯器中，然後在IE9中嘗試。謝謝。

Code may be seen here

在這裏：

<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-compatible作爲標題或頁面上的meta html標記。

在這裏你可以找到圖標，如果它是藍色時，表示兼容模式被激活，因此礦是IE9 http://imgur.com/BPDq3

Answer 2

激活這些問題的排序是通過兼容模式

編輯兼容模式設置引起的在IE9：

1. alt+t > Compatibility View Settings
2. 清除掉所有的網站，並取消所有複選框。

現在，您的瀏覽器將無法進入保持兼容模式（除非<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />網站的力量吧）