пробел между <li>элементами с дисплеем: ячейка таблицы - PullRequest
Новая
       40

пробел между <li>элементами с дисплеем: ячейка таблицы

0 голосов
/ 02 февраля 2012

Последние два часа я пытался решить эту проблему и не смог. Я создал горизонтальное навигационное меню CSS, используя UL и «display» в качестве таблицы, и протестировал его локально во всех браузерах: IE7, IE8, IE9, FF 9.0.1, Chrome, и оно отлично отображается.

Однако при размещении кода на моем сервере я получаю вертикальный пробел между элементами <LI> только в IE. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Document</title>

  <style type="text/css">
 * {margin:0;padding:0;}
#navigation {
    border: 0px solid #000000;
    padding: 0;
    width: 560px;
    position: relative;
    height:100%;
    display:table;
}

#navigation li {
    display: table-cell;
    *width: 16.5%;
    max-width:115px;
    vertical-align: middle;
    word-wrap: break-word;
    text-align:left;
    background: #008dde;  /* Old browsers */
    background: -moz-linear-gradient(top,  #30a9ff 0% , #008dde 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#30a9ff), color-stop(100%,#008dde)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #30a9ff 0%,#008dde 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #30a9ff 0%,#008dde 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #30a9ff 0%,#008dde 100%); /* IE10+ */
    background: linear-gradient(top,  #30a9ff 0%,#008dde 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30a9ff', endColorstr='#008dde',GradientType=0 ); /* IE6-9 */
    *float: left;
    list-style-type:none;
    height:100%;
    *border:0;
    *height:50px;
    position: relative;

}

#navigation li, {display:inline;zoom:1;vertical-align:middle;
    display: inline-block;float: left;
}
#navigation li.middle
{
    border-left:1px solid #52b4f9;
    border-right:1px solid #005e9c; 

}
#navigation li.first
{
    border-right:1px solid #005e9c; 
}
#navigation li.last
{
    border-left:1px solid #52b4f9;
}
#navigation li a{
    color: #FFFFFF;
    display: block;
    font-family: arial,verdana,sans-serif;
    font-size: 11px;
    font-weight: bold;
    *padding-right:10px;
    text-decoration: none;
    height:100%;

}
#navigation a span 
{
    display: block;
    padding: 5px 2px 5px 6px;
    *padding-right:10px;
}
#navigation li:hover,#navigation li.selected
{
    color:#fff; 
    background: #008dde;  /* Old browsers */
    background: -moz-linear-gradient(top,  #818181 0% , #2d2d2d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#818181), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #818181 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #818181 0%,#2d2d2d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #818181 0%,#2d2d2d 100%); /* IE10+ */
    background: linear-gradient(top,  #818181 0%,#2d2d2d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818181', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */
    }

  </style>
</head>

<body>
  <ul id="navigation">
    <li class="first"><a href="#"><span>Home</span></a></li>
    <li class="middle"><a href="#"><span>Channel Programs</span></a></li>
    <li class="middle"><a href="#"><span>Partner Contract</span></a></li>
    <li class="selected"><a href="#"><span>Operational Information</span></a></li>
    <li class="middle"><a href="#"><span>Product & Pricing Information</span></a></li>
    <li class="last"><a href="#"><span>Channel Marketing</span></a></li>
  </ul>

</body>
</html>`

К сожалению, я не смог исправить это с помощью существующих решений, таких как float или изменение типа «display», потому что мне действительно нужен такой подход к моему меню, который должен иметь возможность увеличиваться по высоте, поскольку содержимое в нем динамическое и для нескольких языков, а также для вертикального центрирования.

Большое спасибо за помощь.

Ответы [ 2 ]

1 голос
/ 02 февраля 2012

Я бы сказал, что это из-за поведения встроенного блока по умолчанию. Браузер будет отображать элементы встроенных блоков точно так же, как текст, и любые пробелы в вашем html будут отображаться как неразрывные пробелы на вашем сайте.

Подробнее здесь

Мне не удалось открыть первую ссылку. Если вы не можете, вот еще один .

Несмотря на то, что поплавки со встроенными блоками и т. Д. Просто слишком запутаны, и это вызовет больше проблем в будущем. Я думаю, что вы должны выбрать один и придерживаться его.

0 голосов
/ 02 февраля 2012

Пробуя некоторые другие вещи, я решил проблему, поставив border-spacing:0.

...