Странно IE7 ошибка, что я понятия не имею о ...IE7 - маржа: авто влияет на двойников элемент
Херес HTML:
<header>
<div class='header-overlay'>
<div class='header-overlay-content'>
<ul>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
</div>
</div>
<div class="nav"></div>
</header>
И применимое CSS:
header {
background: url('img/header-background.jpg') center no-repeat;
height: 325px;
width:100%;
}
.header-overlay {
height: 70px;
width: 100%;
position: absolute;
background-color: #fff;
}
.header-overlay-content {
height: 100%;
width: 1000px;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
.nav {
background: url('img/main-nav-blank.png') no-repeat;
width: 1000px;
height: 57px;
position: relative;
top: 235px;
margin: 0 auto; /* this causes problems! */
}
В принципе, заголовок-оверлей должен охватывать всю ширину страницы вверху (следовательно, ширина: 100%), а nav - это полоса, которая горизонтально центрирована на несколько сотен пикселей ниже нее. Они не имеют никакого отношения, кроме того родственные элементы в заголовке, но IE7 делает их так:
заголовок-оверлей получает толкнул ту же сумму, что Nav делает - совершенно озадачивают меня, почему это произошло, и это не происходит ни в каком другом браузере, включая IE8 ... помощь, пожалуйста ?!
я не могу проверить его потому что у меня нет IE7 здесь, но вы можете попробовать установить верхнюю и левую части оверлея на 0 (абсолютный элемент) – Huangism
да, это, казалось, сделало трюк ... _sigh_ – romeboards
Для устаревшего IE это всегда боль, ставя сверху и влево просто безопаснее – Huangism