CSS <ul><li> пробел в IE7 - PullRequest
Новая
       20

CSS <ul><li> пробел в IE7

10 голосов
/ 27 мая 2010

У меня есть вложенное меню 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>

Ответы [ 7 ]

28 голосов
/ 12 августа 2010

Я фактически исправил это, установив vertical-align: bottom для элементов LI (и да, я не удалял пробелы и разрывы строк:)

13 голосов
/ 27 мая 2010

Если вы отображаете элементы <li> в строке (для создания горизонтального меню), разрывы строк между братьями и сестрами <li> s преобразуются в одно пустое пространство.Вы можете либо закомментировать пробелы, либо поместить всех братьев и сестер в одну строку:

комментирование: 

...<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.

3 голосов
/ 05 июня 2013

Исправлено : Добавить масштаб: 1 и * дисплей: встроенный элемент в CSS

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

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

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

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

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

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

3 голосов
/ 27 мая 2010

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

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

0 голосов
/ 01 марта 2012

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

/* for IE7 only */
*+html #nav { font-size: 0; line-height: 0;}
*+html #nav li {font-size: 12px; line-height: 18px; }
0 голосов
/ 27 мая 2010

В вашей текущей модели это дополнительное пространство между тегами 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>

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

0 голосов
/ 27 мая 2010

Я полагаю, вы пытаетесь сделать горизонтальную навигацию?Попробуйте добавить display: inline в ваш контейнер.РЕДАКТИРОВАТЬ:

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

...