css属性之cursor的测试

转自：http://www.pengzao.com/article/css-cursor.html

有时我们为网页元素定义光标样式时需要用到cursor属性来改变用户浏览器默认的设置，比如你想在没有链接的图像上显示手形……以下为css手册中的说明：

cursor设置或检索在对象上移动的鼠标指针采用的光标形状。
此属性的值可以是多个，其间用逗号分隔。假如第一个值不可以被客户端系统理解或所指定的光标无法找到及显示，则第二个值将被尝试使用。依此类推。假如全部值都不可用的话，则此属性不会发生作用。光标不会被改变。

这次我研究两个均用于显示手形的属性值：hand和pointer
很早就知道hand是非标准的，借此机会测试一下，并研究“属性的值可以是多个，其间用逗号分隔”这句话的含意。

测试浏览器：IE5.5、IE6、IE7、Opera9.02、Firefox2.0.0.1

1. cursor: hand;
   结果：除Firefox显示默认光标样式外其它均显示手形。
2. cursor: pointer;
   结果：除IE5.5显示默认样式外其它均显示手形。
3. cursor: hand; cursor:pointer;
   结果：除IE5.5显示默认样式外其它均显示手形。
4. cursor:pointer; cursor: hand;
   结果：都显示手形了。
5. cursor: hand, pointer;
   结果：都显示默认样式，即都不起作用。
6. cursor: pointer, hand;
   结果：都显示默认样式，即都不起作用。
7. cursor: url(cursor.cur), hand;
   结果：Opera显示默认样式，将光标图像换成ani格式也一样。由于url()是IE6以上的IE版本支持的，所以IE5.5显示的也是默认样式。其它浏览器在cursor.cur文件存在的时候显示该光标文件，不存在则显示手形，换成ani格式的文件后Firefox只显示手形。

综上所述，Firefox不支持hand值，不支持ani格式的图像，但支持cur格式的光标图像；
Opera支持hand，但不支持cur或ani格式的光标图像（注：.ani是动态效果文件;.cur是静态效果的指针文件）；
IE6、IE7均支持 hand 和 pointer ， ani 和 cur 图像；
IE5.5不支持 pointer 和任何自定义光标图像，仅支持 hand 。

同时从测试结果可以看出“属性的值可以是多个，其间用逗号分隔”这句话中“属性的值”仅指 url()的个数，而不包括其它属性值：
cursor 如果使用 url 指定一个用户自定义的鼠标光标，则必须要一个备份的关键字属性，比如default、hand等。如

1. .external{cursor: url(globe.cur), default;}
2. .external { cursor:url(globe.cur), url(hyper.cur),pointer; }

所以上面5、6项测试的写法是错误的。第7项测试中，由于Opera不支持 url()，实际效果和5、6项一样，故“假如第一个值不可以被客户端系统理解或所指定的光标无法找到及显示，则第二个值将被尝试使用”这句话对它不起作用！第3项中，cursor 被重定义为 pointer 了，所以对IE5.5不起作用（原因在下面解析）。

因此，定义光标属性的最佳写法是：

1. .test{
2.  cursor:pointer;
3.  cursor: hand;
4. }

或者(需要自定义光标文件时)：

1. .test{
2.  cursor: pointer;
3.  cursor: url(globe.cur), pointer;
4. }
5. * html .test{
6.  cursor /*hide from IE6*/:pointer;
7. }

而为什么在定义 .test { cursor:wait; cursor:url(globe.cur),move; } 时Opera显示的是 wait 样式，而IE5.5却既不是 wait，也不是 move ，更不是 globe.cur，而是默认样式呢？很显然，在Opera中cursor没有被重写，而在IE5.5中被重写为它不支持的url(globe.cur),move！因而只能显示默认了。和上面第3项测试结合可得出结论：IE5.5对不能被识别支持的样式也会重定义，而这个一般规律是不同的！这和不懂装懂有什么区别？

唉，还是那句话，与时俱进，放弃老古董浏览器吧！