菜单中的IE 8错误

Question

我有一个必须在所有浏览器上工作的网站。我正在设计一个如下图所示的菜单

我使用以下html和css代码

制作了此菜单

HTML

 <ul class="menu">
 <li><a href="#"><img src="images/ico1.png" alt="home"><span>Home</span></a></li>
 li><a href="#"><img src="images/ico2.png" alt="products"><span>Products</span></a></li>
 <li><a href="#"><img src="images/ico3.png" alt="Quality Assurance"><span>Quality Assurance</span></a></li>
 <li><a href="#"><img src="images/ico4.png" alt="Gallery"><span>Gallery</span></a></li>
 <li><a href="#"><img src="images/ico5.png" alt="Contact"><span>Contact Us</span></a></li>
 </ul>

的CSS

.menu { float:left;}
.menu li {float: left;padding: 19px 45px; background:url(../images/seperator.png) no-repeat right;}
.menu li.last{ background:none !important;}
.menu li a { text-decoration:none; color:#553614; font-size:18px; font-family: 'fengardo_neueregular';}
.menu li a:hover{ color:#fff;}
.menu li span { float: left; margin-left: 5px;margin-top: 9px;}

它在chrome，Ie9，firefox等中运行得非常完美。但是当我在Ie8中检查时，菜单会像下面的图像一样折叠

如何纠正此错误？

Answer 1

目前没有ie8可供我使用，但在看了@你的标记/样式后，我的想法是： 1.错位很可能是边缘填充问题...看起来span与图标在同一行上没有足够的空间，而这个突破正在放大它，因为一旦{{1 s被推离了那条线，他们宣布了span，这只是推动它们走得更远。

这里有几个选项：首先，使用条件注释定位IE8中的菜单;照亮所涉及的元素（我喜欢使用对比的bgs / border /等，无论是什么让每个元素从组中脱颖而出）并在F12中检查它们......如果答案不明显，请开始比较物理像素大小与另一个浏览器。因此，如果您在这种情况下使用Chrome ...如果开发者工具处于打开状态，您可以通过悬停来查找元素的尺寸... Chrome的尺寸与IE8的尺寸相比如何？如果它们的大小不相同，请对相同的元素重复此过程，仅检查定位，布局，填充和边距。 （@ least）其中一个不应与其他浏览器匹配。您将要补偿用户代理渲染差异，这可以使用我们已经用于定位菜单的条件注释来实现。因此，假设所有margin-top元素都是模糊的130px宽...如果您注意到它们在IE中仅为115px，则将另外15个宽度的像素应用于IE8，仅通过cc应用IE8。

我在漫无边际，但是我会试着把它包起来...你的标记示例在第二个li上缺少一个左括号，在你做任何事情之前想要先修复它其他

抛弃li上的填充。另外，将li应用于它们并使你的锚点display:inline ...这是一个非常容易摆脱和/或测试边距/填充问题的方法。

我也会将图标放入display:block; float:left作为a ...这是我特别的，但这实际上也解决了你的问题...... background-image如果标记中不再有span元素，则s不能与img碰撞。

另一个可能的简单解决方案：img向左浮动并应用左边距...只需浮动：右可以成为解决方案;如果只是span没有解决它，那么将它们向右移动并放弃margin-left将是我的第二次尝试。