一个关于CSS中伪类的IE与FF兼容问题

问题引入:当鼠标经过时给图片加边框.

一个我最初想到的方法就是把图像放在a标记中，然后在设置a元素的边框，但是这样做会非常麻烦，后来发现一个更为方便的解决方法。首先假设这个图片不需要连接到其他的页面，因此尽量不使用“a”标记，而是仅对“img”标记进行设置，CSS代码如下：

img{
 padding:10px;
 border:1px white solid;
}

img:hover{
 border:1px green solid;

}

html代码当然非常简单，仅一句话：

<img src="pic.gif" />

如果使用Firefox浏览器的问题解决了。只需要对img标记使用了“:hover”伪类，但是使用IE 6浏览器时却发现，鼠标移动到图像范围内不会出现绿色边框。

在IE6中，只有“a”标记支持“:hover”伪类，因此必须从这里寻找突破口。首先改造HTML代码，也就是在图像的外面套上一个“a”标记，代码如下：<a href="#"><img src="pic.gif" /></a>

为它编写CSS代码，核心要点是把原来应用于img标记的:hover伪类改在a标记上。

a:hover{color: #FFF;cursor:default;} /*使用了“a”标记以后，鼠标经过图像时，鼠标指针会变成手的形状，cursor:default仍然保持箭头指针*/

a img{
 padding:10px; /*使边框与图像之间有5个像素的空间 此句可要可不要*/
}
a:link img, a:visited img{
 border:1px white solid;
} /*定义在鼠标没有经过时，设置边框为1像素宽白色实线*/
a:hover img, a:active img{
 border:1px green solid;
}/*定义当鼠标经过或者点击图像的时候，边框的颜色变为绿色*/

说明:把“img”写在“a:hover”的后面，就表示在a元素处于鼠标经过状态时，里面的图像被选中。

这样就可以适应IE6/IE7/FF了.