css - CSS 站点导航菜单在 IE7 和 IE8 上消失

Question

有人能解释一下为什么这个菜单在 IE7 和 8 上消失了吗？它在 Chrome、Firefox、Opera 和 Safari 上运行良好。IE7 上的页面宽度也发生了变化，中间的 3 列区域变成了 2 列区域。这是网站链接

Answer 1

浏览您的网站和 style.css

看起来好像第 187 行是问题所在

你有这个：

li#menu-item-29 a, ul#mainmenu-menu li.menu-item-29 a:hover {
    background-image: url("http://wecare.eu.com/images/btnHome.gif");
}

在这里删除 :hover 伪类，只留下一个{ ...

而关于中心部分的 3 列中断是因为 IE7 不支持 box-sizing CSS3 属性。因此，您已将每列的宽度设置为 33.3% + 左右填充 15px。在较新的浏览器上，它会导致 box-sizing:border-box 以不同的方式计算盒子大小。

解决方案是为 IE7 和 8 样式表创建条件语句并以不同方式计算宽度。我的建议是这样设置的：

width: 29.333%
padding: 0 2% 20px

希望能帮助到你。