CSS <ул.> <литий> разрыв в IE7
У меня есть CSS <ul> <li> вложенное меню, которое работает отлично в IE 8 и Firefox, но в IE7 это производит небольшой разрыв между элементами. это - мой CSS:
#nav, #nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position:static;/*the key for ie7*/
line-height: 1.5em;
}
#nav li
{
float: inherit;
position: relative;
width: 12em;
}
#nav ul
{
position: absolute;
width: 12em;
top: 1.5em;
display: none;
left: auto;
}
#nav a:link, #nav a:active, #nav a:visited
{
display: block;
padding: 0px 5px;
border: 1px solid #258be8; /*#333;*/
color: #fff;
text-decoration: none;
background-color: #258be8; /*#333;*/
}
#nav a:hover
{
background-color: #fff;
color: #333;
}
#nav ul li a
{
display: block;
top: -1.5em;
position: relative;
width: 100%;
overflow: auto; /*force hasLayout in IE7 */
right: 12em;
padding:0.5em;
}
#nav ul ul
{
position: absolute;
}
#nav ul li ul
{
right: 13em;
margin: 0px 0 0 10px;
top: 0;
position: absolute;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
{
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
{
display: block;
}
#nav li
{
background: url(~/Scripts/ourDDL/ddlArrow.gif) no-repeat center left;
}
#divHead, #featuresDivHead
{
padding: 5px 10px;
width: 12em;
cursor: pointer;
position: relative;
background-color: #99ccFF;
margin: 1px;
}
/* Holly Hack for IE \*/
* html #nav li { float: left; height: 1%; }
* html #nav li a { height: 1%; }
/* End */
и вот пример для меню:
<ul id='nav'><li><a href="#">Bookstore Online</a></li>
<li><a href="#">Study Resources</a></li>
<li><a href="#">Service Information</a></li>
<li><a href="#">TV Broadcast</a></li>
<li><a href="#">Donations</a></li></ul>
5 ответов
Если вы отображаете элементы встроенными (для создания горизонтального меню), разрывы строк между одноуровневыми преобразуются в один белое пространство. Вы можете закомментировать пробелы или поместить всех братьев и сестер в одну строку:
commenting-out:
...<li>element One</li><!--
--><li>element Two</li><!--
--><li>element Three</li>...
или:
...<li>element One</li
><li>element Two</li
><li>element Three</li>...
(в последнем примере обратите внимание на закрытие > из теги в следующей строке, непосредственно предшествующей следующему брату)
, или вы можете использовать родственные братья в той же строке:
...<li>element One</li><li>element Two</li><li>element Three</li>...
Вы также можете просто использовать float: left на элементах li , что исключает их из встроенного потока документов. Возможно отрицательное левое поле для перемещения li влево, чтобы «покрыть» предыдущее пробел, хотя, вероятно, потребуется метод проб и ошибок, чтобы найти подходящее измерение, чтобы покрыть пространство, не закрывая предыдущий li элемент.
Полагаю, вы пытаетесь сделать горизонтальную навигацию? Попробуйте добавить display: inline в свой контейнер. РЕДАКТИРОВАТЬ:
НМ. В ie6 они отображаются в виде горизонтальной полосы. +1 за ответ mikez. это должно сработать.
В вашей текущей модели это дополнительное пространство между тегами li. Действительно тупая штука IE. Однако следующий css работает, чтобы исправить это и предотвратить размещение тегов li в одной строке. (проверено в IE7, Opera, Chrome)
<style type="text/css">
#nav { margin:0; padding:0; list-style-type: none; width:12em; }
#nav li { position:relative; background:url(~/Scripts/ourDDL/ddlArrow.gif) no-repeat center left; display:inline; }
#nav a,
#nav a:active,
#nav a:visited { display:block; padding:5px; border:1px solid #258be8; color:#fff; text-decoration:none; background-color:#258be8; width:100%; }
#nav a:hover { background-color: #fff; color: #333; }
</style>
Может быть, у вас было много дополнительного кода для выпадающих списков? anywho я этого не добавил.
Это может быть из-за пробелов между элементами списка. Вы можете решить проблему, удалив пробелы между элементами списка, как это сделано здесь:
<ul id='nav'><li><a href="#">Bookstore Online</a></li><li><a href="#">Study Resources</a></li><li><a href="#">Service Information</a></li><li><a href="#">TV Broadcast</a></li><li><a href="#">Donations</a></li></ul>
Или здесь:
<ul id='nav'><li><a href="#">Bookstore Online</a></li><li
><a href="#">Study Resources</a></li><li
><a href="#">Service Information</a></li><li
><a href="#">TV Broadcast</a></li><li
><a href="#">Donations</a></li></ul>
Или, если вы хотите, чтобы HTML выглядел красивее, вы можете поместить комментарии между элементами списка:
<ul id='nav'><li><a href="#">Bookstore Online</a></li><!--
--><li><a href="#">Study Resources</a></li><!--
--><li><a href="#">Service Information</a></li><!--
--><li><a href="#">TV Broadcast</a></li><!--
--><li><a href="#">Donations</a></li></ul>
Есть также приемы удаления пробелов с помощью CSS, как описано здесь.
Я действительно исправил это, установив vertical-align: bottom для элементов LI (и да, я не удалял пробелы и переносы строк :)