2
IE9 및 절대 위치 지정에 문제가 있습니다. JSfiddle에 게시하려고했지만 IE에서 둥근 모서리가 있습니다. IE가 지원하지 않는 CSS3을 사용하고 있습니다. JSfiddle이 엔진을 가지고 있다고 제안하는 것입니다. 다른 말로 표현하자면, 모든 것을 잘 보여주고 있지만, IE9에서는 위쪽 여백을 무시하고 화면에 표시됩니다.IE9의 CSS 절대 위치 지정 버그
내 제안은 편집기에서 복사하여 붙여넣고 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;
}
당신이 날이었다 말할 수 (
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />을 가진 웹 사이트의 힘이 아닌 경우) 내가 그 일을 종료 할 수 있습니다 Compability가 모드로 전환되지 않습니다? –잠깐 내놔. – sg3s