CSS水平菜单-为什么只有IE浏览器显示1像素的边框/间隔？

Question

我有一个带有悬停效果的简单水平菜单 在Chrome/Firefox中它的显示正常，但在IE11中，元素之间会有1像素的边框。

当您悬停在左侧链接上时，您可以看到它：http://jsfiddle.net/cMeE5/ 以下是屏幕截图：IE11 Screenshot http://users.telenet.be/mhd/ie11.png 这个垂直边框还好，但是相同类型的边框总是显示在菜单项的底部（但在JSFiddle中无法重现）。

我还尝试添加了完整的CSS Reset但并没有改变任何东西。

以下是JSFiddle上的代码：

<div id="navcontainer">
    <div id="midnav">
        <ul>
            <li><a href="#">Link A</a></li>
            <li class="activesub"><a href="#">Link B</a></li>
        </ul>       
    </div>
</div>
<div id="maincontainer">
    <div id="main">
        <h1>Test</h1>
    </div>
</div>

CSS样式表：

* { margin: 0; padding: 0;}
html { min-height: 100%; height: 100%; margin-bottom: 1px; overflow-y: scroll;}
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.875em;
    background-color: #ebebeb;
    color: black;
    height: 100%;
}
a, a:active, a:hover, a:visited, a:link  {
  text-decoration:  none;
  font-weight:      none;
  background-color: none;
  color:       inherit;
} 
/********************/
/*** SUBNAVIGATIE ***/
/********************/
#navcontainer {
    width: 100%;
    background-color: #464646;
}
#midnav {
    width: 1000px;
    margin: 0 auto;
    color: white;
    padding-top: 0.3em;
}
#midnav ul {
    list-style-type: none;
    display: table;
}
#midnav li {
    display: table-cell;
    -moz-border-radius-topleft: 7px;
        -webkit-border-top-left-radius: 7px;
    border-top-left-radius: 7px;
    -moz-border-radius-topright: 7px;
        -webkit-border-top-right-radius: 7px;
    border-top-right-radius: 7px;

    -webkit-transition: all 0,1s ease;
        -moz-transition: all 0,1s ease;
        -o-transition: all 0,1s ease;
        -ms-transition: all 0,1s ease;
        transition: all 0,1s ease;
}
#midnav a {
    display: block;
        padding: 0.3em 1em 0.5em 1em;
}
.activesub, #midnav li:hover {
    color: #464646;
    background-color: #ebebeb;
}

/********************/
/*** MAIN CONTENT ***/
/********************/
#maincontainer {
    width: 100%;
    background-color: #ebebeb;
}
#main {
    width: 1000px;
    margin: 0 auto;
    color: #464646;
}

#maincontainer p {
    margin-bottom: 1em;
    margin-top: 1em;
}

- FDM

---

我在IE9上看不到任何边框。你用的是哪个版本？ - Lokesh Suthar

很抱歉，我也看不到IE9中的任何边框或轮廓，可能它并不是边框，而是一个“轮廓” - 尝试添加这个规则#navcontainer{ outline:0 }或者在出现问题的地方添加。 - Jack

@cimmanon，我还附上了一张截图，这是IE11的。 - FDM

@LokeshSuthar，我也添加了一张截图。 - FDM

@JackWilliams 我添加了“outline”，但问题仍未解决。我已经添加了一张截图。使用的是IE11。 - FDM

你使用了 display:table，但我没有看到任何 border-spacing。 - Mr Lister

Answer 1

我仍然不确定在IE中是什么原因导致这个问题，但解决底部1像素空间的方法是给LI元素添加1像素边框（IE条件CSS）

#midnav li {
    border-bottom: 1px solid #464646;
}

#midnav .activesub, #midnav li:hover {
    border-bottom: 1px solid #ebebeb;
}

- FDM

Answer 2

你可以添加一个负的底部外边距来修复IE的计算错误。

margin-bottom:-1px;

- Vincent Duprez

Answer 3

这一行代码来自于navcontainer div的背景颜色。问题的根源可能是因为不同浏览器之间的字体渲染不同（特别是考虑到0.875em的奇怪缩放比例）。midnav div的padding-top属性为0.3em，这个大小是基于字体渲染的。例如将此值更改为6px可以对齐midnav并消除问题：

#midnav {
    width: 1000px;
    margin: 0 auto;
    color: white;
    padding-top: 6px;
}

当你禁用body的font-family属性时，也可以看到差异。在对齐div时，我认为最好使用像素。

- Criminally Inane

---

谢谢，但似乎这里并没有多大改变。然而，我通过给LI元素添加底部边框找到了解决方案。 另外，0.875em是默认大小 - 参见http://www.w3schools.com/css/css_font.asp - FDM

当然，那也可以。无论如何，问题不在于li菜单项上的灰色边框或轮廓，而是在li项目底部和maincontainer顶部之间存在一个间隙，这暴露了它们后面的navcontainer的灰色背景。如何选择关闭这个间隙取决于您。 :)谢谢。我相信默认字体大小可能在某个时候浮现在我的意识中，但我没有立刻想起来。 - Criminally Inane