html - 如何防止双击 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

是这样的吗？

.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+ */
}

<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>