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」標籤上設置一些填充。