CSS菜单IE7问题

Question

菜单适用于所有主流浏览器，但在IE7中看起来有所不同。 请参阅下面的屏幕截图
查看http://jsfiddle.net/FQLdm/6/上的演示

将鼠标悬停在主页链接上时，您将看到一个子菜单。 在IE7中，菜单按钮和子菜单都被向上推。

这发生在我替换它的时候

.menu1 ul.menu li{
    position: relative;
    list-style-type: none;
    display:block;
    float:left;
}

有这个 （我需要使用这种方式inline-block来居中列表项）

.menu1 ul.menu li{
    position: relative;
    list-style-type: none;
    display:inline;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
}

在Chrome中它看起来很好

在IE7中它看起来不同。 请注意主页按钮是如何抬起的。 它应该看起来像上面的chrome截图。

Answer 1

在你的li vertical-align:middle写下vertical-align:middle 。 像这样：

.menu1 ul.menu li{
  vertical-align:middle;
  position: relative;
  list-style-type: none;
    display:inline;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/

}

Answer 2

示例在我的PC上的IE7上运行正常。

Answer 3

这样的事情

把它放在头上的yore html文件中

<!--[if lte IE 7]>
  <style>
    .menu1 ul li ul {
        position:absolute;
        top: 5px or 10px;
     }
     .menu1 {
       position: relative;
     }
  </style>        
<![endif]-->

Answer 4

请教这个答案： 底部有IE6额外填充

此外，不设置display:block有时会导致填充问题，就像我曾经做过的那样。 尝试将其添加到CSS以查看是否有任何改进。