CSS 规则在选择时禁用突出显示表列

Question

背景

希望禁用突出显示表格的第一列。

HTML 源代码

<table>
<tbody>
    <tr><td class="unselectable" unselectable="on"><button value="1" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 1</td></tr>
    <tr><td class="unselectable" unselectable="on"><button value="2" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 2</td></tr>
    <tr><td class="unselectable" unselectable="on"><button value="3" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 3</td></tr>
</tbody>
</table>

CSS 源代码

*.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}

fiddle

http://jsfiddle.net/2LQfg/1/

问题

当用户选择鼠标按钮并将其拖过表格时，按钮文本 (✘) 会突出显示(不良行为)。当用户复制并粘贴值时，不包括值 (✘)(期望的行为)。

澄清一下，这是当前的行为(不希望的):

下图显示了将鼠标拖过表格后所需的行为:

大多数用户可能不会关心，但这是一种稍微误导的用户体验。无论用户突出显示文本并复制它，都应该复制所有突出显示的文本。通过添加 unselectable 类，按钮的 (✘) 值会高亮显示，但不会被复制。用户根本不应该能够突出显示(选择)(✘) 因为它被设置为 unselectable。

环境

我在 Xubuntu 上使用 Firefox 19.0.2，但我寻求跨浏览器的解决方案。

问题

什么是防止用户突出显示第一个表格列(包含按钮)的跨浏览器方法？

相关

• How to disable text selection highlighting using CSS?
• Is there a way to make a DIV unselectable?
• Imitate "onselectstart=return false" using CSS or other non-JS approach?
• http://www.mindfiresolutions.com/Using-of-onselectstart-and-its-alternative-for-Firefox-239.php
• http://therelentlessfrontend.com/2010/02/13/how-to-disable-text-selection-in-a-table/

Answer 1

如果内容是通过 content CSS 规则设置的，浏览器似乎不会复制内容。希望你不需要支持 IE7

button.unselectable:after {
    content: "\2718";
}

http://jsfiddle.net/ExplosionPIlls/2LQfg/50/