CSS菜单IE7问题答案

【问题标题】：CSS menu IE7 issueCSS菜单IE7问题
【发布时间】：2011-12-27 22:15:46
【问题描述】：

菜单适用于所有主流浏览器，但在 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 屏幕截图。

【问题讨论】：

这很可能是某种保证金问题。你有重置css脚本吗？我不能 100% 确定，但似乎子菜单正在“推高”主菜单项，就像我之前所说的那样，这很可能是某种保证金问题。
@matt 我已经重置了 CSS。这不是问题。这只发生在我使用inline-block 而不是block 时。阅读上文
哦，我完全错过了：p，这是因为 IE7 并不真正支持内联块。它仅来自 IE8+。也许使用 float:left 和 margin-left？
@matt 我已经掌握了 IE7 的技巧。完全阅读我的问题。我需要使用inline-block，这样我就可以在 UL 中将列表项居中。
您的代码在 IE7 中运行

标签： html css

【解决方案1】：

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

}

【讨论】：

太完美了。垂直对齐确实是问题所在。有用。谢谢

【解决方案2】：

示例在我的 PC 上的 IE7 上运行良好。

【讨论】：

可能是评论而不是答案:)
所以把它写成评论框里的评论而不是答案
在评论框中我不能放图片
我在朋友的电脑上试过了，我仍然看到同样的问题。试试这个链接，让我知道你看到了什么eprogramers.com/menu.html
这是同一个例子。为了便于阅读，我只是在 jsfiddle 中将其最小化，但它仍然是相同的示例

【解决方案3】：

类似的东西

把它放在以前的html文件中

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

【讨论】：

是的，我注意到了。不要在 jsfiddle 上尝试。他们似乎在内部的标准浏览器上执行此操作。把css和html复制粘贴到本地试试
您确定您使用的是 IE7。我在台式机和笔记本电脑上都试过这个，我发现两者都有问题。

【解决方案4】：

请参阅此答案：IE6 extra padding on bottom

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

【讨论】：