CSS中定义超链接背景图片的一些问题

Posted on 2006-10-11 14:08 太清剑客 阅读(5625) 评论(2)  编辑  收藏 所属分类: XHTML|CSS
 今天在定义超链接变换a:hover时碰到一些问题，主要是关于图片大小显示不正常。
 比如定义了一个CSS样式：   
 1<style>
 2#Main
 3{
 4width:300px;
 5height:300px;
 6}
 7#Main a
 8{
 9color: #006400;
10}
11#Main a:hover
12{
13color: Red;
14background: 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;
}

只有注册用户登录后才能发表评论。
网站导航:
 

posts - 10, comments - 4, trackbacks - 0, articles - 0

Copyright © 太清剑客