填充背景圖像懸停創建額外的不需要的空間

Question

所以我有一個簡單的問題。我有一個懸停的背景圖像更改效果，但似乎有一些額外的懸停，我無法擺脫懸停。

我的jsfiddle：http://jsfiddle.net/leongaban/G9dFa/

我試過在我懸停調整背景圖像的填充，但是添加所需的20個像素也增加了額外的間距。將0不允許背景圖像填充空間:(

任何提示讚賞:)

HTML：

<div class="nav"> 
    <div id="nav"> 
     <ul> 
      <li><a href="#">HOME</a></li> 
      <li><a href="#">ABOUT US</a></li> 
      <li><a href="#">LINK 3</a></li> 
      <li><a href="#">LINK 4</a></li> 
      <li><a href="#">OUR BLOG</a></li> 
     </ul> 
    </div> 

    <div id="search"> 

    </div> 
</div> 

CSS：

.nav { 
    width: 994px; 
    height: 27px; 
    background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav.gif'); 
} 

#nav ul li { 
    height: 27px; 
    margin: 0; 
    padding: 8px 20px 6px 20px; 
    line-height:30px; 
    text-align: center; 
    font-size: 11px; 
    border-right: 1px solid #fff; 
    display: inline; 
} 

#nav ul li a { 
    padding: 8px 0px 6px 0px; 
    color: white; 
    text-decoration: none; 
} 

#nav ul li a:hover { 
    width: 100%; 
    height: 100%; 
    padding: 8px 20px 6px 20px; 
    background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif'); 
} 

Answer 1

在這裏，你去。改變了一些CSS。 你應該在錨點上的時候在裏面填充了。 將你的li改爲向左而不是顯示：inline; 使背景圖像爲背景並添加了x軸重複。

http://jsfiddle.net/G9dFa/6/

.nav { 
    width: 994px; 
    height: 27px; 
    background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav.gif'); 
} 

#nav ul li { 
    height: 27px; 
    margin: 0; 
    line-height:30px; 
    text-align: center; 
    font-size: 11px; 
    border-right: 1px solid #fff; 
    float:left; 
} 

#nav ul li a { 
    padding: 8px 20px 6px 20px; 
    color: white; 
    text-decoration: none; 
} 

#nav ul li a:hover { 
    width: 100%; 
    height: 100%; 
    /*-webkit-background-size:100% 100%; 
    -moz-background-size:100% 100%; 
    background-size:100% 100%;*/ 
    background:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif') repeat-x; 
}​ 

Answer 2

把所有的造型上A - 標籤。擺脫LI上的所有內容，但display:inline除外。將display:block添加到您的A-標記中。

Answer 3

到Diodeus類似：

把所有的樣式到您的錨標記a。

將您的錨標籤樣式更改爲display: inline-block。

顯示內嵌塊元素在某些瀏覽器中有一個有趣的錯誤，如果項目之間有任何空白區域，它將渲染一個時髦的空間。爲了解決這個問題，你需要修復你的HTML，把li項目結尾。即實際移除它們之間的空間。

這裏是你的代碼的例子：

http://jsfiddle.net/leongaban/G9dFa/

Answer 4

你不需要在<li>填充，請嘗試刪除，它應該工作

Answer 5

的問題是，你的錨不因爲您爲LI元素設置了填充，因此需要佔滿整個空間：

• 從LI中刪除填充
• 添加填充到錨標記

---

#nav ul li a { 
    width: 100%; 
    height: 100%; 
    padding: 8px 20px 6px 20px; 
    color: white; 
    text-decoration: none; 
} 

#nav ul li a:hover { 
    background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif'); 
}​ 

DEMO

Answer 6

在這裏你去。

http://jsfiddle.net/r9dTG/

編輯：

哇，我們都具有類似的結果出來了，我要強調的唯一的事情就是與錨標記LI標記填充頂部和填充底部聲明的行高沒有多大意義。無論如何，我都會使用其中一個或其他數據，因爲數學計算和維護都不算累加。