内联contenteditable标签无法在IE中正确对齐

Question

我遇到的情况是，我具有内联的contenteditable span标签以及其他非contenteditable标签，它们在IE之外的所有浏览器中都可以正常工作。在IE中，标签无法充当内联标签，并开始强制将其自身对齐为块（某种）。我需要一些东西使它们充当内联。当标签可满足要求时，IE似乎在强迫某些奇怪的行为。

<div class="container">
<span class="text" contenteditable="true">Lorem ipsum dolor </span>
<span class="tag">Tag</span>
<span class="text" contenteditable="true"> sed dignissim maximus mattis </span>
<span class="tag">Tag</span>
<span class="text" contenteditable="true"> vel ex ut nisi elementum tincidunt libero</span>

这是一个带有示例的小提琴：http : //jsfiddle.net/glennmicallef/m7tkgo2u/

在IE和Chrome中打开小提琴（例如）以查看它们之间的区别。

Answer 1

就我而言，我使用:before和:after伪元素来实现此目的。

[contenteditable=true]:before {
  content: attr(before-content);
  margin-right: 2px;
}

<div class="container">
  <span class="text" contenteditable="true">Lorem ipsum dolor </span>
  <span before-content="Tag" contenteditable="true"> sed dignissim maximus mattis </span>
  <span before-content="Tag" contenteditable="true"> vel ex ut nisi elementum tincidunt libero</span>
</div>

这使得伪元素部分不可编辑，其余部分可编辑。

UX 只在 IE 上好...