双击时如何防止Safari中的空白区域/空间选择？

Question

Safari浏览器中的文本选择很奇怪。您不仅可以选择文本，还可以选择双击时的一些“空”空格。你在这里：

所选区域不是td标签！

我需要在我的情况下防止这种行为，只选择文本或不选择任何内容。 有什么想法吗？

经过大量调查后，非常简单的JSFiddle：https://jsfiddle.net/vadimcpp/u38y5fsh/5/

HTML：

<table>
  <tr>
    <td class="my-cell"><div>Cell 1</div></td>
    <td class="my-cell"><div>Cell 2</div></td>
    <td class="my-cell"><div>Cell 3</div></td>
    <td class="my-cell"><div>Cell 4</div></td>
  </tr>
</table>

CSS：

.my-cell {
  border: 1px solid lightgray;
  height: 75px;
  vertical-align: text-top;
  width: 100px;
}

Answer 1

这样的东西？

＆＃13;

＆＃13;

.my-cell {
  border: 1px solid lightgray;
  height: 75px;
  vertical-align: text-top;
  width: 100px;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
}

.selectable {
  -webkit-user-select: text;
  /* Chrome/Safari */
  -moz-user-select: text;
  /* Firefox */
  -ms-user-select: text;
  /* IE10+ */
}

＆＃13;

<table>
  <tr>
    <td class="my-cell">
      <div class="selectable">Cell 1</div>
    </td>
    <td class="my-cell">
      <div class="selectable">Cell 2</div>
    </td>
    <td class="my-cell">
      <div class="selectable">Cell 3</div>
    </td>
    <td class="my-cell">
      <div class="selectable">Cell 4</div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;