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

Question

我创建了一个水平菜单，在Firefox 6的作品完美，IE9，Safari浏览器，Chrome和Opera，但在IE7 & IE8在菜单中休息到下一行的最后一个环节，我附加菜单的屏幕截图。

水平菜单 http://imageshack.us/photo/my-images/819/ie9screenshot.jpg/

IE8水平菜单截图的IE9截图

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文件。