IE7导航的HTML和CSS问题

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作为GodFather之前建议的a标记（这样填充可以在所有方面工作）并使用一个严格的doctype，否则你可能会看到怪癖模式的变化。

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

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

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

Answer 2

将“.buttonleft li”更改为：block，以及需要在“a”标记上设置的相同规则。 也许你需要在“a”标签上设置一些填充。