HTML和CSS与IE7导航问题导航

Question

我做了一个导航栏的网站的顶部，最后看我想要的是，简单的文本菜单，但当你悬停项目背景变化使用背景图像。我已成功地做到这一点，在所有浏览器，当你将鼠标悬停在后台的变化，它是好的，但在Internet Explorer 7，它看起来像这样...

我试图改变高度和宽度，但仍然无法让IE7与其他人一样？

用于导航的HTML代码

 <ul class="buttonleft"> 
    <li><a href="#language"><img id="topflag" src="images/flags/gb.png" alt="GB"/> English <img src="images/arrow.png" alt="GB" /></a></li> 
    <li><a href="#search">Search and Book <img src="images/arrow.png" alt="GB" /></a></li> 
    <li><a href="#offers">Latest Offers <img src="images/arrow.png" alt="GB" /></a></li> 
    </ul>  

的CSS是

.buttonleft li{float:left;margin-top:-9px;display:inline;list-style:none;margin-right:6px} 
.buttonleft li a{color:#D9D9D9;font:normal 13px Tahoma;text-decoration:none;height:36px;width:auto;padding:10px} 
.buttonleft li a:hover{background:url(../images/topbgover.png)} 
img{border:0} 
#topflag{margin-right:3px;margin-left:3px} 

任何帮助将是巨大的：d

Answer 1

我想出了您的导航的变化，并在发布的演示：

http://jsfiddle.net/audetwebdesign/HB6Zm/

我没有测试它在IE7，但两个关键的东西设置有：使用display: block为a标签正如GodFather早些时候所暗示的那样（这种填充方式在各方面都有效）并使用严格的文档类型，否则你可能会在怪癖模式中看到变化。

由于您正在浮动li元素，它们会变成块，因此不需要更改显示属性。

最后，我不清楚为什么你需要一个负边缘，但没有看到最终的布局，这很难说。

我添加了一些额外的填充和背景颜色来突出显示块元素，并说明哪些样式控制布局的各个方面。

Answer 2

改变 “.buttonleft礼” 为display：block ，并且需要在“a”标签上设置相同的规则。 也许你需要在“a”标签上设置一些填充。