CSS菜单IE7问题

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

当你将鼠标悬停在家乡链路检查演示，你会看到一个子菜单。在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中看起来好像没什么 In chrome it works fine

在IE7中它看起来不同。请注意主页按钮的起始位置。它应该看起来像上面的铬屏幕截图。

In IE7 it looks different

来源

2011-12-27 Pinkie

这很可能是某种保证金问题。你有一个重置CSS脚本？我肯定不能100％，但似乎这个子菜单是“推高”主菜单项，就像我之前说过的，这很可能是某种保证金问题。 – Matt 2011-12-27 08:15:26

@matt我已经有一个CSS重置。这不是问题。这只发生在我使用'inline-block'而不是'block'时。阅读 – Pinkie 2011-12-27 08:24:13

ohhh我完全错过了：p，这是因为IE7并不真正支持内联块。它只来自IE8 +。也许使用float：留下一个空白左边？ – Matt 2011-12-27 08:35:46

在您的li中写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*/ 

}

来源

2011-12-27 09:41:59 sandeep

这是完美的。垂直对齐确实是问题。有用。 Thanksss – Pinkie 2011-12-27 09:49:07

像这样

把它在当年的html文件头

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

来源

2011-12-27 08:18:41

这不起作用。你应该在jsfiddle中尝试。 – Pinkie 2011-12-27 08:24:36

http://jsfiddle.net/amkrtchyan/qzNKd/ 在我ie7它工作正常 – 2011-12-27 08:32:20

是的，我注意到了。不要在jsfiddle上尝试。他们似乎在内部的标准浏览器上执行此操作。只需在本地复制和粘贴css和html并试试 – Pinkie 2011-12-27 08:38:23

enter image description here