HTML双击选择的可能性

Question

我没有在DocType上发布此内容，因为它实际上不是design，视觉表示不是我的问题，行为是。很抱歉，如果放错了地方，但我不认为这是设计师的问题。

以下DOM：

<ul style="overflow: hidden;">
   <li style="float: left;"><strong>SKU:</strong>123123</li>
   <li style="float: left;"><strong>ILC:</strong>asdasdasdasd</li>
</ul>

或

<div style="overflow: hidden;">
   <div style="float: left; width: 49%"><strong>SKU:</strong>123123</div>
   <div style="margin-left: 50%; width: auto;"><strong>ILC:</strong>asdasdasdasd</div>
</div>

或

<p>
   <span><strong>SKU:</strong>123123</span>
   <span><strong>ILC:</strong>asdasdasdasd</span>
</p>

所有人都给我提出了一个奇怪的问题

• IE 6
• IE 7
• Firefox 3.x
• Chrome

但不在

• IE 8

[当您在[SKU：]之后双击'123123'时，它将从下一个dom元素中选择'123123'和'ILC：'。

[在此页面上输入任何文本（在SO中），双击一个单词，即使在段落的中间，它也仅选择那个单词”。这些示例都有dom元素将其关闭，任何人都知道为什么会发生这种情况。

我的同事们使用'双击'机制来选择相关的产品ID来完成工作，这对我来说毫无意义。

Answer 1

我有同样的问题。如果您在li的结束标记之前放置了一个空格，则应该对其进行修复。

<ul style="overflow: hidden;">
    <li style="float: left;"><strong>SKU:</strong>123123 </li>
    <li style="float: left;"><strong>ILC:</strong>asdasdasdasd </li>
</ul>

Answer 2

我怀疑如果您在两个元素之间包含空格或不间断空格&nbsp，您会发现您可以双击并仅选择一个元素，但不能同时选择两个元素，因为浏览器将不再看到这两个元素作为一个单词。

Answer 3

在每个 之间放置" "（不间断空格），或仅放置span（空白）将分隔单词，并防止双击选择溢出到相邻的跨度中。

或者，如果您不想看到可见的空间，请使用​（零宽度空间）。