沉沒的Atlantis

潛入水中，有時是比冒出水面更好的選擇

隨筆分類(10)

隨筆檔案(10)

CSS中定義超鏈接背景圖片的一些問題

Posted on 2006-10-11 14:08 太清劍客閱讀(5646) 評論(2) 編輯收藏所屬分類: XHTML|CSS

?今天在定義超鏈接變換a:hover時碰到一些問題，主要是關于圖片大小顯示不正常。
?比如定義了一個CSS樣式：???

?1

<style>
?2

#Main
?3

{
?4

width:300px;
?5

height:300px;
?6

}
?7

#Main?a
?8

{
?9

color:?#006400;
10

}
11

#Main?a:hover
12

{
13

color:?Red;
14

background:?url(images/botton.gif)?no-repeat?center;
15

}
16

</style>

但是發現定義了沒什么用，因為圖片太大了（60*28px），圖片只顯示了其中一角，然后試著用定義a元素的width和height來解決，發現沒什么用。
研究了老半天，終于發現可以用內補丁padding解決，只要定義一下a,a:hover的padding就可以了，不過發現IE中，a元素padding的top和bottom屬性是不會自動把div給“撐大”的，firefox正常，所以，為了兼容IE，需要在層定義中加入height，就像上面的height:300px;
最后代碼如下：

<style>

#Main

{

width:?300px;

height:300px;

}

#Main?a

{

color:?#006400;

padding:?10px?8px;/*可以有4個參數，表示上右下左延長的距離*/

}

#Main?a:hover

{

color:?Red;

background:?url(/images/botton.gif)?no-repeat?center;/*圖片路徑*/

padding:?10px?8px;/*上下延長距離10px，左右延長距離8px*/

}

</style>

其中的距離可以根據圖像大小和具體情況變動。

Feedback

# re: CSS中定義超鏈接背景圖片的一些問題回復 更多評論

2008-04-04 23:27 by Hmily

一般都是把<a>放入到<ul><li><a href="">ddd</a></li></ul>
而li的寬度是可以控制的。

# re: CSS中定義超鏈接背景圖片的一些問題 回復 更多評論

2009-03-21 11:17 by 小沈

我也碰到了這種情況

a:
{
display:block;
}

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: CSS中定義超鏈接背景圖片的一些問題怎樣使層在底部對齊

沉沒的Atlantis

潛入水中，有時是比冒出水面更好的選擇

隨筆分類(10)

隨筆檔案(10)

最新隨筆

最新評論

CSS中定義超鏈接背景圖片的一些問題

Feedback

# re: CSS中定義超鏈接背景圖片的一些問題回復 更多評論

# re: CSS中定義超鏈接背景圖片的一些問題 回復 更多評論

常用鏈接

Friends' Blog

評論排行榜

閱讀排行榜

沉沒的Atlantis

潛入水中，有時是比冒出水面更好的選擇

隨筆分類(10)

隨筆檔案(10)

最新隨筆

最新評論

CSS中定義超鏈接背景圖片的一些問題

Feedback

# re: CSS中定義超鏈接背景圖片的一些問題 回復 更多評論

# re: CSS中定義超鏈接背景圖片的一些問題 回復 更多評論

常用鏈接

Friends' Blog

評論排行榜

閱讀排行榜

# re: CSS中定義超鏈接背景圖片的一些問題回復更多評論

# re: CSS中定義超鏈接背景圖片的一些問題回復更多評論