Это должно быть простым, понятным исправлением, содержащим плавающие числа, что угодно ... но это не так. Это ошибка hasLayout, которая составляет одну из редких ситуаций, когда вам нужно удалить haslayout, но когда это невозможно сделать.
То, как написан ваш код (кстати, ничего плохого в этом нет!) Означает, что #background div нуждается в hasLayout для хранения плавающих дочерних элементов (даже попытка дополнительного очищающего элементаработа, которая показывает ошибку IE вне и снаружи).В вашем коде это есть с overflow : hidden;, но, поскольку в * 1007 есть hasLayout из-за высоты 50px, эта высота в IE7 - это все, что «содержится» - это, конечно, неправильно, поскольку всплывающие спискитоже для детей #background ... но из-за ошибки hasLayout даже работает с плавающими, поэтому спорить о спецификациях бесполезно!
Я пробовал каждый хак, который знал, но самым простым способом было переписатьиспользуйте код и избегайте hasLayout там, где это возможно, и используйте вместо этого поля и высоту строк, поэтому я поменял раскраску двух содержащих блоков.Я сделал background черный и .nav-block серый и дал фону верхний отступ 50px, чтобы сделать черную полосу ... затем я переместил меню, которое находится внутри серого, на 43px с отрицательным верхним полем.это 43px, потому что в вашем примере я измеряю черную полосу @ 50px;и верхние ссылки @ 36px в высоту, которые означают, что они будут смотреть вертикально по центру на черную полосу, они будут нуждаться в 50px-36px = 14px / 2 = 7px top & bottom 'spacing'.
div .nav-block тогда должно бытьтот, который был создан, чтобы содержать плавающие дочерние элементы, но overflow: hidden не будет работать сейчас из-за отрицательного верхнего поля, он будет скрывать верхние ссылки!поэтому вместо этого я плавал влево и дал ширину 100%;это еще один способ создания нового контекста форматирования блока и предоставления IE нужного ему hasLayout без отсечения контента.
тогда я в значительной степени следовал тому, что вы сделали, чтобы получить короткие верхние ссылки и полную ширину (130 пикселей)Дочерние ссылки только с плавающими верхними ссылками, так что они будут "shinkwrap" - без поплавка в дочерних списках дочерние ссылки могут быть сделаны display: block, поэтому они принимают всю ширину ul.Для высоты на верхних ссылках IE требовались как высота строки, так и отступы, но line-height на дочерних ссылках было достаточно из-за display: block;
HTML такой же как у вас выше ..
CSS:
html, body {margin: 0; padding: 0;}
#background { /* black bar */
background: #000;
padding: 50px 0 0 0;
}
.nav-block {
background: #EBE9E1;
float: left;
width: 100%;
padding-bottom: 3px;
}
#nav, #nav ul {
margin: 0;
padding: 0;
list-style:none;
}
#nav { /* black bar = 50px, top links = 36px, difference = 14px, = 7px from top */
margin-top: -43px;
}
#nav ul {
width:130px;
border-right: 2px solid black;
border-bottom: 2px solid black;
border-left: 2px solid black;
margin-left:-2px;
}
#nav > li { /* top links only */
float: left;
margin: 0 0 0 30px;
}
#nav a {
line-height: 36px;
background-color:white;
color:#C51721;
padding: 10px;
text-decoration: none;
}
#nav ul a { /* child list links */
display: block;
padding: 0 10px;
line-height: 24px;
border-bottom:1px solid #DEDEDE;
}