Internet explorer 8 水平菜单IE7和IE8兼容性问题

我创建了一个水平菜单，它在Firefox 6、IE9、Safari、Chrome和Opera中运行得非常好，但在IE7和IE8中，菜单中的最后一个链接断开到下一行，我附上了菜单的屏幕截图

IE9水平菜单的屏幕截图

IE8水平菜单的屏幕截图

HTML和CSS代码如下所示：-

HTML代码：-

<ul class="menu">

        <li class="first"><a href="#">Bridal</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Bridesmaid</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Gentleman's</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Flower Girl</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Special Occassion</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Accessories</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Shoes</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li class="last"><a href="#">Sale</a></li>

    </ul> <!-- END OF MENU -->

我在这个论坛和其他论坛上发现了一些类似的文章，但没有一篇是有用的。我试过列表的位置：里面；显示：内联；等等，但都不起作用。还有一个细节，我在IE9浏览器中查看html页面，但在IE7和IE8兼容模式下检查它们

谢谢，

---

Raj

我也有同样的问题，IE似乎喜欢添加不可见的边距和填充，所以你可能想给你的菜单增加一点宽度，然后再调整位置，我建议为IE使用另一个css文件。

你能提供一些在线版本的链接吗：）？嗨，上帝，对不起，我没有网站的url，我只是做了psd到html的工作，并将它发送给我的客户谁做上传和东西。感谢Narvath的帮助，因为这似乎是一个小问题，我不想应用浏览器特定的风格。我只是想知道是否有任何隐藏的css属性会覆盖IE7和IE8错误（比如边界折叠来修复IE7和IE8中的表问题）。

ul.menu {
width: 965px;
height: 44px;
font-size: 18px;
color: #ffffff;
list-style: none;
margin: 0px;
padding: 0px;
}

ul.menu li {
float: left;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}

ul.menu li a {
height: 34px;
color: #ffffff;
text-align: center;
display: block;
background-image: url(images/menu-normal.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 10px 17px 0px 17px;
}

ul.menu li.first {
background: none;
}

ul.menu li.first a {
width: 88px;
background-image: url(images/first-normal.png);
margin: 0px;
padding: 10px 0px 0px 8px;
}

ul.menu li a:hover {
background-image: url(images/menu-hover.jpg);
background-repeat: repeat-x;
}

ul.menu li.first a:hover {
background-image: url(images/first-hover.png);
}

ul.menu li.last a {
width: 68px;
background-image: url(images/last-normal.png);
margin: 0px;
padding: 10px 8px 0px 0px;
}

ul.menu li.last a:hover {
width: 68px;
background-image: url(images/last-hover.png);
}