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

【问题标题】：Inline contenteditable tags fail to align correctly in IE内联 contenteditable 标签无法在 IE 中正确对齐
【发布时间】：2014-09-04 10:21:46
【问题描述】：

我有一种情况，我有内联 contenteditable span 标签和其他 non-contenteditable 标签，它们在除 IE 之外的所有浏览器中都可以正常工作。在 IE 中，标签无法充当内联并开始强制将自己对齐为块（有点）。我需要一些东西来使它们充当内联。当标签是 contentedtiable 时，似乎 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（例如）中打开 fiddle 以查看差异。

【问题讨论】：

标签： css internet-explorer inline contenteditable

【解决方案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>

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

用户体验只在 IE 上好用...

【讨论】：