css - 填充文本鏈接旁邊的背景圖像鏈接 - 爲什麼？

這個CSS問題是殺死我:-(css - 填充文本鏈接旁邊的背景圖像鏈接 - 爲什麼？

我無法刪除此頁面http://www.yart.com.au/stackoverflow/test2.htm

我的問題減少到最低限度，所以它是很清楚的鏈接下填充。

可以見我的問題在這裏http://www.yart.com.au/stackoverflow/blue.png alt text http://www.yart.com.au/stackoverflow/blue.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 

<style type="text/css"> 

* 
{ 
    padding:0; 
    margin:0; 
    font:15px arial; 
} 

div 
{ 
    display:inline; 
    height:18px; 
    line-height:18px; 
    background-color :blue; 
} 

.PageMove 
{ 
    display:inline-block; 
    background-image: url(http://www.yart.com.au/stackoverflow/page_move.gif); 
    background-repeat:no-repeat; 
    width:18px; 
    height:18px; 
    line-height:18px; 
} 


.Text 
{ 
background-color :red; 
display:inline; 
height:18px; 
line-height:18px; 
} 


</style> 
</head> 


<body> 

<div><a href="#" class="PageMove"></a><a href="#" class="Text">18 pixels high</a></div> 

</body> 

</html>

來源

2010-07-12 Petras

東西是display: inline-block被視爲字符和坐在基線。有空間在下方（在p，j，g和q等字母上找到）。

設置vertical-align: bottom將元素放置在底部而不是基線。

來源

2010-07-12 12:25:20 Quentin

爲什麼不使用float？

<div style="width: give-it-a-usefull-width"> 
    <a href="..." id="pageMove" style="float: left;">...</a> 
    <a href="..." id="text" style="flaot: left;">...</a> 
</div>

來源

2010-07-12 12:27:39 helle

...因爲浮甚至比inline-block的 – Quentin 2010-07-12 12:30:34

我不知道你的問題是究竟從朵朵但

內聯元素不能指定一個「高度」。所以你的height:18px;'內聯'div將被忽略。

來源

2010-07-12 12:28:37 billyswong

我已閱讀，他們可以的，如果他們是inline-block的 – Petras 2010-07-12 12:30:45

與高度集中的股利也被設置爲顯示更復雜：內聯，而不是內聯-塊。這與手頭的問題無關。 – Quentin 2010-07-12 12:32:08

剛剛編輯帖子。你的'div'是內聯的，而不是內聯塊。 – billyswong 2010-07-12 12:32:54

我在一些電子郵件模板上遇到了這個問題。 IE和FF沒有顯示藍線，但在iphone和android等移動設備上打開的電子郵件。

通過Chrome瀏覽器在Web電子郵件客戶端中打開的電子郵件也顯示藍線。

我解決了這個問題，將圖像放在單元格中間。 align =「middle」

將單元格設置爲align =「middle」。

（這個地方的形象背後的藍線和解決問題）

不規則形狀的圖像（被PNG或GIF），你可能要考慮保存圖像與背景顏色或轉換爲在白色背景上的jpeg。再次，它不是解決這個問題的圖像類型，只是刪除一個清晰的背景，並創建一個方塊顏色的實心矩形來隱藏線條來解決問題。

祝你好運！

內特京東方

來源

2011-01-14 20:07:53

css - 填充文本鏈接旁邊的背景圖像鏈接 - 爲什麼？

回答

相關問題