Question

过去两个小时我一直试图解决这个问题而且无法做到。我创建了一个水平的css导航菜单，使用UL和'display'作为表格，并在所有浏览器上进行本地测试：IE7，IE8，IE9，FF 9.0.1，Chrome和它完美显示。

但是，当我将代码放在我的服务器上时，我只在IE中的<LI>元素之间得到一个垂直的空白区域。

<!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>`

不幸的是我无法用现有的解决方案来解决这个问题，例如浮动或更改'显示'类型，因为我的菜单真的需要这种方法，因为其中的内容是动态的，所以需要能够扩展高度。适用于多种语言，也可以垂直居中。

非常感谢您的帮助。

Answer 1

我会说这是因为默认的内联块行为。浏览器将像文本一样呈现内联块元素，并且html中的任何空格都将显示为您网站中的不间断空格。

更多信息here

我无法打开第一个链接。如果您不能，here is another。

即使是带有内嵌块等的浮动也太乱了，并且会在路上造成更多麻烦。我认为你应该选择一个并坚持下去。

Answer 2

在尝试其他一些事情时，我已经通过border-spacing:0。

解决了这个问题

<li>元素与display：table-cell </li>之间的空白区域

2 个答案: