Html CSS水平菜单-为什么仅在IE中使用1px边框/空格？

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

将鼠标悬停在左侧链接上时可以看到：

以下是一个屏幕截图：

这个垂直边框并没有那么糟糕，但是相同类型的边框总是显示在菜单项的底部（但它不会在JSFIDLE中重现）

我还尝试添加了一个完整的CSS重置，但这并没有改变任何事情

以下是JSFIDLE上的代码：

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

---

该行来自

navcontainer

div的背景色。问题的根源可能是浏览器之间的字体呈现不同（特别是考虑到奇怪的0.875em大小缩放）。

midnav

div的

padding top

属性为0.3em，大小取决于字体呈现。例如，将此值更改为6px将对齐

midnav

，并消除以下问题：

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

---

禁用正文的字体族属性时，也可以看到差异。在我看来，在对齐div时最好坚持使用像素。

我仍然不确定IE中出现问题的原因，但底部1px空间的解决方案是在LI元素中添加1px边框（条件IE CSS）

---

您可以添加负的底部边距来修复IE的错误计算

margin-bottom:-1px;

---

我看不到IE9的任何边界。您使用的是哪个版本？恐怕对我来说也是一样，在IE9中看不到任何边框或轮廓，它可能不是边框，但实际上是一个

轮廓

-尝试添加此规则

#navcontainer{outline:0}

，或者添加到它发生的任何地方。@cimmanon IE11，我添加了一个屏幕截图作为well@LokeshSutharIE11，我添加了一个截图作为参考well@JackWilliams我添加了“大纲”，但它不能解决问题。我添加了一个屏幕截图。使用IE11。谢谢，但这里看起来变化不大。但是，我通过在LI元素中添加一个边框底部找到了一个解决方案。此外，0.875em是一个默认大小-请参阅，这也适用。无论如何，问题不是

li

菜单项上的灰色边框或轮廓，而是

li

项底部和

maincainer

顶部之间的间隙，这暴露了

navcontainer

后面的灰色背景。如何缩小这一差距取决于你自己。：）谢谢我确信默认的字体大小可能在某个时候在我的意识中出现过，但我并没有立即回忆起它。

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

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

margin-bottom:-1px;