跨浏览器隐藏选择显示的方式答案

【问题标题】：Cross browser way to hide selection display跨浏览器隐藏选择显示的方式
【发布时间】：2009-05-09 14:51:09
【问题描述】：

我正在制作一个基于浏览器的 javascript 游戏。因此，在游戏中，用户无需复制/粘贴文本。然而，在游戏中有很多地方需要用户点击并拖动来进行选择。

在游戏中有很多单元格，内部只是普通的表格单元格，有一个不间断的空间来阻止它们在 Firefox 中折叠（我可以使用 CSS 来阻止 IE、Safari 和 Opera 中的折叠，但由于某种原因它没有）无法在 Firefox 中工作，所以我使用了非中断空格），使用纯色背景颜色或背景图像。

当玩家在它们之间拖动选择时，游戏会通过更改背景颜色来突出显示单元格。但是，浏览器也会突出显示非中断空格，在某些单元格上留下灰色矩形。

此外，浏览器使用与游戏不同的方式来确定选择的内容。

例如在一个 5 x 5 的正方形中，如果用户选择 (1, 1) 到 (3, 3)，游戏会突出显示以下选择：

|   |   |   |   |   |
|   | X | X | X |   |
|   | X | X | X |   |
|   | X | X | X |   |
|   |   |   |   |   |

但浏览器会在以下内容中突出显示非中断空格：

|   |   |   |   |   |
|   |   | X | X | X |
| X | X | X | X | X |
| X | X | X | X |   |
|   |   |   |   |   |

有没有办法阻止浏览器选择样式显示出来？至少在 Firefox 和 Chrome 中，但最好是跨浏览器。

【问题讨论】：

【解决方案1】：

对于 Firefox，您可以添加 css 样式：(mozilla guide)

-moz-user-select: none

对于 chrome 和 safari：（还没有找到可靠的来源）

-khtml-user-select:none

如果您更喜欢 javascript 解决方案，这是我从 previous answer 找到的解决方案：

<div onselectstart="return false">some stuff</div>

【讨论】：

【解决方案2】：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

【讨论】：