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

Question

我创建了一个水平菜单，它在 Firefox 6、IE9、Safari、Chrome 和 Opera 中完美运行，但在 IE7 和 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);
}

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

谢谢， 拉杰

Answer 1

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