CSS <ul> <li> пробел в 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>

Ответ 1

Если вы показываете встроенные элементы <li> (для создания горизонтального меню), разрывы строк между sibling <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>...

(в последнем примере обратите внимание на закрытие > тегов <li> на следующей строке, непосредственно предшествующей следующей сестре)

или вы можете использовать однопользовательских братьев и сестер:

...<li>element One</li><li>element Two</li><li>element Three</li>...

Вы также можете просто использовать float: left для элементов li, что выводит их из потока встроенных документов. Возможно, отрицательный левый край, чтобы переместить li влево, чтобы "покрыть" предыдущие пробелы, хотя, вероятно, для проб и ошибок, чтобы найти подходящее измерение, чтобы покрыть пространство без покрытия предыдущего элемента li. >

Ответ 2

Я на самом деле исправил его, установив вертикальное выравнивание: снизу к элементам LI (и да, я не удалял пробелы и разрывы строк:)

Ответ 3

Это может быть из-за пробелов между элементами списка. Вы можете устранить проблему, удалив пробелы между элементами списка, например:

<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, как описано здесь.

Ответ 4

Исправить: добавить увеличение: 1 и * показать: встроенный элемент в CSS

Оригинальный CSS:

.blueberry .pager li {
display: inline-block;
}

Исправлено CSS:

.blueberry .pager li {
display: inline-block;
zoom: 1;
*display: inline;
}

Звездочка (*) перед дисплеем: inline позволяет другим браузерам игнорировать эту строку.

from: http://uncorkedstudios.com/2011/12/12/how-to-fix-the-ie7-and-inline-block-css-bug/

Ответ 5

Я предполагаю, что вы пытаетесь сделать горизонтальную навигацию? Попробуйте добавить дисплей: встроенный в ваш контейнер. EDIT:

NM. В ie6 они отображаются как горизонтальная полоса. +1 для ответа mikez. это должно сделать это.

Ответ 6

В вашей текущей модели это дополнительное пространство между тегами li. Действительно тупой IE. Тем не менее, следующий css работает, чтобы исправить это и сохранить ваши теги li в 1 строке. (протестирован в 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>

Возможно, у вас было много дополнительного кода для выпадающих меню? любой, кого я не добавил.

Ответ 7

вы можете добавить эти стили в свои styles.ie.css

/* for IE7 only */
*+html #nav { font-size: 0; line-height: 0;}
*+html #nav li {font-size: 12px; line-height: 18px; }