Menu IE 8菜单中的错误

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

我使用下面的html和css代码创建了这个菜单

Html

它在chrome、Ie9、firefox等浏览器中运行得非常好，但当我签入Ie8时，菜单会像下图一样折叠

---

如何纠正此错误？

目前我没有ie8可供使用，但在查看@your markup/style之后，我的想法如下：
1.不对齐很可能是边距填充问题……看起来与图标在同一行上的

span

s没有足够的空间，此中断将放大它，因为一旦

span

s被推离该行，它们就声明了

边距顶部，这只会将它们推得更远

您在这里有几个选项：首先，在IE8中以有条件注释的菜单为目标；照亮所涉及的元素（我喜欢使用对比的背景/边框等，使每个元素从组中脱颖而出的东西），并在F12中检查它们……如果答案不明显，开始将物理像素大小与另一个浏览器进行比较。所以，如果你在这种情况下使用Chrome…你可以通过悬停在开发工具打开的情况下找到元素的尺寸…Chrome的尺寸与IE8的尺寸相比如何？如果它们的大小不完全相同，则对相同的元素重复此过程，仅检查定位、布局、填充和边距。（@至少）其中一个浏览器不应与其他浏览器匹配。您需要补偿用户代理渲染的差异，这可以通过使用我们已经用于针对菜单的条件注释来实现。因此，让我们假设所有
li
元素的宽度都是130像素左右……如果您注意到它们在IE中只有115像素，请通过cc向IE8和IE8再应用15像素的宽度

我在漫无边际地说我很差劲，但我会尝试总结一下……您的标记示例在第二个
li
中缺少一个开头括号，在您做任何其他操作之前，我希望先解决这个问题

去掉
li
s上的填充物。另外，对它们应用
display:inline
，并使您的锚
display:block；float:left
…这是一种非常容易解决和/或测试边距/填充问题的方法

我也会将图标放置在
a
中作为
background image
s…这是我的特别之处，但这实际上也是您问题的解决方案…如果标记中没有更多
img
元素，
span
s就不会与
img
相冲突

这里另一个可能的简单解决方案是：
span
s向左浮动，并应用左边距…只需使用float:right就可以了；如果仅仅是
float:right
无法解决问题，那么将它们向右浮动并舍弃
左边的边距将是我的第二次尝试。
为什么要为这些分隔符设置图像？@DiederikEEn我认为图像分隔符在这里不是问题。因为我试过不用分离器
 <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>

.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;}