无可比拟的文本选择，没有大纲

Question

我有一个contenteditable文本结构，如下所示：

<div class="content" contenteditable="true">
  <span contenteditable="false">
    <span class="chunk" contenteditable="true">This sentence contains </span>
  </span>
  <span contenteditable="false">
    <span class="chunk bold" contenteditable="true">some bold</span>
  </span>
  <span contenteditable="false">
    <span class="chunk" contenteditable="true">text!</span>
  </span>
</div>

这样可以在所有3＆＃34; chunk＆＃34;中选择文本。跨越。但是，删除＆＃34;大纲＆＃34;从它使用css 禁用选择文字：

.chunk {
  outline: 0px solid transparent;
}

任何人都可以解释原因吗？ JSBIN example

修改

这绝对是导致问题的大纲的存在。给它1px solid transparent大纲仍然允许文本选择。只要您指定0px，就会阻止选择。