过去两个小时我一直在尝试解决这个问题，但无法解决。 我使用 UL 和“显示”作为表格创建了一个水平的 css 导航菜单，并在所有浏览器上对其进行了本地测试: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 或更改“显示”类型等现有解决方案来解决此问题，因为我的菜单确实需要这种方法，因为菜单中的内容是动态的并且需要能够扩展高度用于多种语言并垂直居中。
非常感谢您的帮助。
最佳答案
我会说这是因为默认的内联 block 行为。浏览器将呈现内联 block 元素，就像文本一样，您 html 中的任何空白都将在您的网站中显示为不间断空格。
更多信息 here
我无法打开第一个链接。如果你不能，here is another .
尽管如此，带有行内 block 等的 float 还是太乱了，只会在以后造成更多麻烦。我认为你应该选择一个并坚持下去。
关于css - <li> 元素之间的空白，显示为 :table-cell，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9103515/