當變焦變化時，「li」項目上的垂直線條

我正在Chrome上進行測試。我的按鈕看起來不錯，沒有縮放當變焦變化時，「li」項目上的垂直線條

Without zoom

<li class="active" id="site_content"> 
     <a href="#" id="site_content_link">Edit Content</a> 
</li>

這裏是如何看起來，如果我放大/縮小

With zoom

這裏是CSS：

.sub_nav ul li.active, .sub_nav ul li:hover { 
background: url("/assets/sub_nav_right.png") no-repeat scroll right 0; 
padding: 0 11px 0 0; 

.sub_nav ul li { 
display: block; 
float: left; 
line-height: 16px; 
margin: 0 0 0 28px; 
} 

.sub_nav ul li.active a, .sub_nav ul li:hover a { 
background: url("/assets/sub_nav_left.png") no-repeat; 
color: #FFFFFF; 
display: block; 
padding: 5px 0 5px 11px; 
text-shadow: none; 
} 

.sub_nav ul li a { 
font-family: arial; 
font-weight: bold; 
line-height: 16px; 
}

我創建了一個的jsfiddle這裏： http://jsfiddle.net/BdGA4/

來源

2013-02-18 Tony

是否有您選擇使用背景圖像創建丸狀的按鈕，而不是'邊界radius'性質特殊的原因嗎？ – cimmanon 2013-02-18 14:00:21

這可能是因爲用戶放大後背景圖像在右側被剪切掉了，請提供一個我們可以測試的鏈接？你也可以使用css3來實現沒有圖像的相同設計（IE瀏覽器不友好，但IE瀏覽器的退出可能適合你），請在這裏找到更多信息：http://www.css3.info/preview/rounded -border/ – 2013-02-18 14:00:49

你可以創建一個jsFiddle，請問？我沒有看到你爲李的文本設置背景的位置。 – Tsar 2013-02-18 14:01:55

最好的解決方案是將sub_nav_left.png圖像切片爲水平（repeat-x）設置爲啓用的1px寬的背景圖像。這將填補所有情況下的空間。

來源

2013-02-18 14:21:59 Tsar

不，它在其他縮放級別中斷，並且在實際大小中不正確，您會看到不同。 – Tony 2013-02-18 14:24:00

我增加了右側精靈的大小。寬度不是11px，而是寬度爲16px。這兩個精靈現在重疊，所以你不會看到由瀏覽器舍入像素導致的縮放錯誤。

Fixed fiddle

http://jsfiddle.net/BdGA4/2/

來源

2013-02-18 15:26:38 MarkSmits

當變焦變化時，「li」項目上的垂直線條

回答

相關問題