作者：段立新

标准参考

请参见 W3C CSS 2.1中关于 ’cursor‘ 的说明 ： http://www.w3.org/TR/CSS21/ui.html#propdef-cursor

问题描述

'cursor:hand' 特性值是由浏览器厂商设置的扩展样式值，现在只有 IE 和 Opera 支持，并不是 CSS 相关规范中制定的，因此其它浏览器均不支持该特性值。

造成的影响

使用 'cursor:hand' 样式会导致 Safari Chrome Firefox 浏览器不呈现手型光标。

受影响的浏览器

IE6 IE7 IE8 Opera

问题分析

MDSN 中关于 'cursor' 的说明， 包括一些 W3C 中没有规定的鼠标样式，不仅 IE 支持，其他各浏览器除 Opera 也都支持，具体 value 值如下：

value 有下面的形式：

• all-scroll：鼠标样式为中间有一个点，上下左右有四个箭头，表示可以向上下左右滚动( IE6 和更高级版本支持)；
• col-resize：鼠标样式为中间有两条垂直的竖线，左右有两个箭头，表示列项可以水平调整大小( IE6 和更高级版本支持)；
• hand：鼠标样式为表示一个链接( 通常是手型 )；
• no-drop：鼠标样式为一个手型和一个中间有斜线的圆圈，表示在当前鼠标的位置拖动项不能被按下( IE6 和更高级版本支持 )；
• not-allowed：鼠标样式为一个中间有斜线的圆圈，表示请求不被响应；
• row-resize：鼠标样式为中间有两条水平的竖线，上下有两个箭头，表示行项可以垂直调整大小( IE6 和更高级版本支持 )；
• vertical-text：鼠标样式为垂直的I形，表示编辑垂直的文本 ( IE6 和更高级版本支持 )。

实际效果如下表：

	IE6 IE7 IE8	Firefox Chrome Safari
all-scroll
col-resize
row-resize
hand
no-drop
not-allowed
vertical-text

可见：

• 'all-scroll | col-resize | row-resize | not-allowed | vertical-text' 的样式 IE 和 Firefox Chrome Safari 大体类似，但又有少许的不同。
• 'no-drop' 在 IE 下是一个手型和一个小中间有斜线的圆圈，'no-drop' 在 Firefox Chrome Safari 下与 'no-allowed' 相同。
• 'hand' 只有 IE6 IE7 IE8 Opera 支持，其它浏览器都不支持该属性。
• 'Opera' 除了支持 'hand' 样式，其它非 W3C 规定的鼠标样式均不支持。

解决方案

使用 CSS 规范中定义的 'cursor: pointer' 样式代替 'cursor:hand' 样式。

参见

知识库

• ...

相关问题

• ...