CSS水平菜单 - 为什么只有IE中的1px边框/空格？

我有一个简单的水平菜单与悬停效果。它在Chrome/Firefox中显示效果很好，但在IE11中它的元素之间有1px边框。CSS水平菜单 - 为什么只有IE中的1px边框/空格？

你可以看到它悬停在左侧链接时：http://jsfiddle.net/cMeE5/

以下是截图：IE11 Screenshot http://users.telenet.be/mhd/ie11.png

这种垂直边界并不坏，但同一种边界始终在底部显示菜单项的一面（但它不会在JSFiddle中重现）。

我也尝试添加完整的CSS重置，但不会改变任何东西。

下面是对的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; 
}

来源

2014-02-21 FDM

哪个版本的IE？ – cimmanon

我无法在IE9上看到任何边框。你正在使用哪个版本？ –

我也同样害怕，在IE9中看不到任何边框或轮廓，可能它不是边框，而是实际上是一个“轮廓” - 尝试添加此规则#navcontainer {outline：0}或者到它发生的任何地方。 –

我仍然不知道是什么原因导致IE中的问题，但对于底部1px的空间解决方案是增加1px的边界Li元素（有条件的IE CSS）

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

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

来源

2014-02-23 08:18:14 FDM

该线从navcontainer div的背景色来。问题的根源可能在于浏览器之间不同的字体渲染（特别是0.875em的奇数尺寸）。 midnav div的padding-top属性为0.3em，基于字体呈现的大小。此值更改为6像素，例如，对齐midnav并消除问题：

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

您还可以看到区别，当你禁用身体font-family属性。国际海事组织最好在对齐div时坚持像素。

来源

2014-02-23 04:33:18

谢谢，但在这里看起来并没有多大变化。不过，我已经通过给LI元素添加边框底部来找到解决方案。此外，0.875em是一个默认大小 - 请参阅http://www.w3schools.com/css/css_font.asp – FDM

当然，这也适用。在任何情况下，这个问题不是“li”菜单项上的灰色边框或轮廓，而是“li”项底部的底部与“maincontainer”顶部之间的间隙，暴露出来在他们后面的'navcontainer'灰色背景。你如何选择缩小这个差距取决于你。 :) 谢谢。我敢肯定，默认的字体大小可能会在某种程度上贯穿我的意识，但我没有记住它。 –

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

margin-bottom:-1px;

来源

2014-02-23 08:34:31

此答案帮助了我。在IE11上，谢谢！ –

CSS水平菜单 - 为什么只有IE中的1px边框/空格？

回答

相关问题