BX2050: 各浏览器禁止内容选中的方式不同

标准参考•
问题描述•
造成的影响•
受影响的浏览器•
问题分析•
解决方案•
参见

作者：段立新

标准参考

无

问题描述

各浏览器禁止内容选中的方式不同，Firefox Chrome Safari 都有私有 CSS 样式控制，IE 通过标签属性和标签方法控制，Opera 通过标签属性控制。

造成的影响

若只使用某一浏览器支持的禁止内容选中，则其他浏览器仍然可以选中内容。

受影响的浏览器

所有浏览器

问题分析

各浏览器对禁止内容选中，各有各自的办法：

MSDN 中关于标签属性 'unselectable' ，参见：http://msdn.microsoft.com/en-us/library/ms534706(VS.85).aspx 。

MSDN 中关于标签方法 onselectstart ，参见：http://msdn.microsoft.com/en-us/library/ms536969(VS.85).aspx 。

Firefox 中私有样式 -moz-user-select ，参见：https://developer.mozilla.org/en/CSS/-moz-user-select 。

Chrome 和 Safari 中私有样式 -webkit-user-select ，参见：http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html 。

分析以下代码：

<!DOCTYPE html> <html> <body> <div unselectable="on"
                style="background:#CCC;" >unselectable=on </div> <br/> <div
                style="background:#CCC;-webkit-user-select:none;"
                >-webkit-user-select:none;</div> <br/> <div style="background:#CCC;-moz-user-select:none;" >-moz-user-select:none;</div> <br/> <div
                style="background:#CCC;" onselectstart="return false;"
                >onselectstart="return false;"</div> </body> </html>

在各浏览器中效果如下：

	IE	Firefox	Chrome Safari	Opera
unselectable="on"	yes¹	no²	no	yes
-webkit-user-select:none;	no	no	yes	no
-moz-user-select:none;	no	yes	no	no
onselectstart="return false;"	yes	no	yes	no

注1：可以禁止内容选中。

注2：没有禁止内容选中。

可见，禁止内容选中的方法如下：

IE 给标签设置 unselectable= "on" ，设置标签方法 onselectstart="return false;"
Firefox 给标签设置私有样式 -moz-user-select:none 。
Chrome Safari 给标签设置私有样式 -webkit-user-select:none ，设置标签方法 onselectstart="return false;"。
Opera 给标签设置 unselectable= "on" 。

解决方案

给标签设置样式 -moz-user-select:none ;-webkit-user-select:none 同时标签设置 unselectable= "on" ，保证各浏览器都可以禁止内容选中。

参见

知识库

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 Firefox 3.6.10 Chrome 7.0.544.0 dev Safari 5.0.2 Opera 10.62
测试页面:	non_select.html
本文更新时间:	2010-10-12