具有 contenteditable 属性的 Span 在 IE11 中不会表现为内联元素

Question

我在 div 中有两个 span 元素，宽度有限。两者的文字内容无缝合并为一个连续的"paragraph".

但是，我需要第二个 span 成为 contenteditable="true"。

但是当我添加属性时，第二个元素的文本在 IE11 中从一个新行开始。

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

这是供您使用的 JsFiddle：https://jsfiddle.net/enoq0xk3/

是否有任何已知的修复方法？

Answer 1

好的。我有一个解决方案：

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>

这使得第一部分不可编辑，其余部分可编辑。

虽然 UX 仅在 IE 上很好...因此您需要相应地切换实现。

具有 contenteditable 属性的 Span 在 IE11 中不会表现为内联元素

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

html

css

contenteditable