Question

我创建了一个水平菜单，可以在Firefox 6，IE9，Safari，Chrome和Opera中完美运行，但在IE7和IE中也是如此。 IE8菜单中的最后一个链接断开到下一行，我附上了菜单的截图。

IE9水平菜单的屏幕截图 http://imageshack.us/photo/my-images/819/ie9screenshot.jpg/

IE8水平菜单的屏幕截图

http://imageshack.us/photo/my-images/696/ie8screenshot.jpg/

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 -->

CSS代码： -

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

我在这个论坛和其他论坛上发现了一些类似的文章，但没有一个是有帮助的。我试过list-position：inside;显示：内联;等，但没有一个工作。还有一个细节我在IE9浏览器中查看html页面，但在IE7和IE8兼容模式下检查它们。

谢谢，拉吉

Answer 1

我有同样的问题，似乎IE喜欢添加不可见的边距和填充，所以你可能想要给你的菜单更多的宽度并在之后修复位置，我建议使用另一个css文件用于IE。

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

1 个答案: