CSS菜单IE7问题 [英] CSS menu IE7 issue

问题描述

菜单适用于所有主流浏览器，但它在IE7看起来不同。请参阅下面的屏幕截图。

查看 http://jsfiddle.net/FQLdm/ 6 /

Menu works in all major browsers but it's looking different in IE7. See screen shots below.
Check demo at http://jsfiddle.net/FQLdm/6/

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

When you hover your mouse over the home link, you will see a submenu. In IE7, both the menu button and submenu are pushed up.

当我替换时发生了

.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 looks fine

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

In IE7 it looks different. Note how the home button is raised up. it should look like the chrome screenshot above.

推荐答案

在您的 li中写入 vertical-align：middle / code>。像这样：

Write vertical-align:middle in your li. Like this:

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

}

这篇关于CSS菜单IE7问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！