修复：我只需要将“float:left”应用于“li”元素而不是 imgs。谢谢！
我有一个水平导航菜单，我正在努力让它在所有浏览器中工作。我在这里创建了一个小提琴：
它在 Chrome、Safari 和 Opera 中运行良好。但是在 Firefox 和 Internet Explorer 中，文本没有正确地居中于每个按钮上。相反，文本从第二个按钮开始并向右溢出。
任何人都可以找到解决方法吗？
HTML
<div id="nav">
<ul>
<li><a href="index.htm"><span>HOME</span><img src="http://www.cawyatt.co.uk/home-button.png" alt="Website Navigation. Home Button" title="Home" height="115" width="120" /></a></li>
<li><a href="how-use-services.htm"><span>HOW TO USE OUR SERVICES</span><img src="http://www.cawyatt.co.uk/how-button.png" alt="Website Navigation. How To Use Our Services Button" title="How To Use Our Services" height="115" width="120" /></a></li>
<li><a href="playstation-repair.htm"><span>PLAYSTATION REPAIR</span><img src="http://www.cawyatt.co.uk/playstation-button.png" alt="Website Navigation. Playstation Repair Button" title="Playstation Repair" height="115" width="120" /></a></li>
<li><a href="xbox-repair.htm"><span>XBOX REPAIR</span><img src="http://www.cawyatt.co.uk/xbox-button.png" alt="Website Navigation. Xbox Repair Button" title="Xbox Repair" height="115" width="120" /></a></li>
<li><a href="wii-repair.htm"><span>WII REPAIR</span><img src="http://www.cawyatt.co.uk/wii-button.png" alt="Website Navigation. Wii Repair Button" title="Wii Repair" height="115" width="120" /></a></li>
<li><a href="customer-reviews.htm"><span>CUSTOMER REVIEWS</span><img src="http://www.cawyatt.co.uk/reviews-button.png" alt="Website Navigation. Customer Reviews Button" title="Customer Reviews" height="115" width="120" /></a></li>
<li><a href="location-map.htm"><span>LOCATION AND MAP</span><img src="http://www.cawyatt.co.uk/map-button.png" alt="Website Navigation. Location And Map Button" title="Location and Map" height="115" width="120" /></a></li>
<li><a href="contact.htm"><span>CONTACT US</span><img src="http://www.cawyatt.co.uk/contact-button.png" alt="Website Navigation. Contact Us Button" title="Contact Us" height="115" width="120" /></a></li>
</ul>
CSS
ul, ol, dl {
padding:0;
margin:0;
list-style:none;
}
#nav {
position:relative;
width:960px;
height:115px;
margin-bottom:10px;
background-image: url(http://www.cawyatt.co.uk/nav-bg.png);
}
#nav li a span {
position:absolute;
width: 120px;
top: 70px;
text-align:center;
z-index:2;
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
}
#nav li a img {
float:left;
-webkit-transition:opacity 0.7s ease-in-out;
-moz-transition:opacity 0.7s ease-in-out;
-o-transition:opacity 0.7s ease-in-out;
transition:opacity 0.7s ease-in-out;
}
#nav li a:hover img {
opacity:0;
}