IE 中内联 contenteditable 元素前后的换行符答案

【问题标题】：Line break before and after inline contenteditable element in IEIE 中内联 contenteditable 元素前后的换行符
【发布时间】：2016-08-20 02:46:55
【问题描述】：

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

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

这就是它在 Chrome 中的样子：

这是 IE：

有什么办法可以解决吗？

UPD：

我的IE版本：

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

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

【问题讨论】：

我看不出有任何理由编辑段落的子元素，有点毫无意义。您可以尝试float: left;：p *[contenteditable] {float: left;} 差不多，除非您真的想发疯并围绕问题编写脚本。我建议重新考虑编辑 just 内联元素。
@John 好吧，不幸的是，我已经有很多代码在使用这种方法，所以现在不可能使用另一种方法。我们需要这个功能来实现某种在线编辑器，当一个用户可以对文本范围进行标记，然后另一个用户可以根据这些标记更改文本（例如修复错误）。我不明白您的float 解决方案，请您解决一下吗？
啊，现在看小提琴。所以 IE11 64 位（标准模式 w/Doctype）看起来不像你的屏幕截图；在 Chrome 49 和 IE 11 中，跨度以假定/直观的顺序呈现。确认您使用的是 IE 11 并且页面正在以标准模式呈现？还要对跨度和 DOM 的样式进行区分吗？我看不到br 元素，空格只会在pre 元素或white-space: pre; 元素中生效。
@John 我用我的环境信息更新了我的问题。是的，我使用的是 IE11。您是否尝试过调整窗口大小以进行跨度换行？关于 BR - 我的代码和 DOM 中都没有 brs。

标签： css internet-explorer frontend contenteditable

【解决方案1】：

请注意：contentEditable 在所有浏览器甚至版本中都存在极大的错误和不一致。使用 CKEditor 之类的 JS WYSIWYG 编辑器（可以内联编辑）要好得多。例如，某些浏览器会在按下 Enter 时将前一个文本块换成 或<div> 或，而其他浏览器则会输入 。有时  或两个必须在前面或末尾。两个 s 算作一行......直到它没有。 IE 不支持在表格或内联元素中正确使用contentEditable。 粘贴会插入 HTML 而不是文本。问题层出不穷，会让你无休止的沮丧。

【讨论】：

我想你是对的，在我的情况下使用 CKEditor 会更好。然而，我们已经有很多使用contenteditable 的代码，不幸的是，现在还不能重写它。但是，无论如何，谢谢。
好吧，我这么说的唯一原因是因为在我意识到 WYSIWYG JS 之前，我花了很多时间（和头发）试图让 contentEditable 工作，解决像你这样的问题存在编辑。我实际上也不认为有不使用 JS 的解决方案，但我祝你努力:)

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

【讨论】：