html - IE 仅在 CSS/设计、跨浏览器兼容性方面存在问题

Question

这个问题基于这个JSFiddle。它是一种导航设计，具有两个顶级菜单项和三个子菜单（结构为无需脚本即可访问）。要查看的元素可能是：

     <nav class="top-menu">

有一个紧迫的问题：

1. 只需在 Internet Explorer 中打开 JSFiddle 即可查看。为什么它只在 IE 中会这样掉下来？即使在 IE9 和 10 中。

在这里的任何帮助将不胜感激！

Answer 1

我注意到“top-header”块有不同的高度，为了解决这个问题，我添加了 line-height CSS 规则：

.top-header {
    padding: 0 0 5px 0;
    display: inline-block;
    margin-left: 20px;
    position: relative;
    + line-height: 28px; 
}

目前在 IE 和 Chrome 中对我来说似乎相同。

更新的小提琴

Answer 2

添加

height :136px \0/;

在 .top-header 的末尾，问题将得到解决检查 jsfiddle

Answer 3

您可以使用一些“磁带”在 IE 中修复此问题。:)

通过 CC，添加一个border-bottom: white 10px solid;或outline:white 10px solid; http://jsfiddle.net/SKJvv/7/ http://jsfiddle.net/SKJvv/8/

它并没有解释太多布局在玩什么。

（抄送包括：http: //jsfiddle.net/SKJvv/10/）