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

Question

我创建了一个水平菜单，它在 Firefox 6、IE9、Safari、Chrome 和 Opera 中完美运行，但在 IE7 和 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 喜欢添加不可见的边距和填充，所以你可能想给你的菜单多一点宽度并在之后修复位置，我建议为 IE 使用另一个 css 文件。