在IE中内联contenteditable元素之前和之后的换行符

Question

我需要制作内联元素contenteditable。它适用于Chrome / Firefox，但IE（至少11个）在span {C} contenteditable之前和之后插入换行符。

链接到小提琴：https://jsfiddle.net/nokpy02g/1/

这就是Chrome中的样子：

这是IE：

有没有办法解决它？

UPD：

我的IE版本：

我的小提琴页面上的IE模式：

另外，我使用的是Windows 7 Professional，64位

Answer 1

请注意：contentEditable在所有浏览器甚至版本中都非常错误并且不一致。你可以使用像CKEditor这样的JS WYSIWYG编辑器（它可以编辑内联）。例如，某些浏览器会在<p>或<div>或<span>中按 Enter 时换行上一个文本块，而其他浏览器则会输入<br> }。有时<br>或两个必须位于前端或末端。两个<br>计为一行...直到它没有。 IE在表格或内联元素中不支持contentEditable。粘贴HTML而不是文本。问题一直在继续，并会让你无尽的沮丧。

Answer 2

就我而言，我使用了:before和:after伪元素来实现这一点。 https://jsfiddle.net/on695rz2/2/

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

<div style="width:200px">
  <span before-content="4.5" contenteditable="true">Test this simple layout in IE11 and see the wonders of the internet!</span>
</div>

这使第一部分（“ 4.5”）不可编辑，其余部分可编辑。

Span with contenteditable attribute won't behave as an inline element in IE11