打印

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" yes1 no2 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

关键字

-moz-user-select 私有属性 -webkit-user-select onselectstart unselectable