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

Question

我在宽度有限的 div 中有两个 span 元素。两者的文字内容无缝融合为一个连续的“段落”。

但是，我需要第二个 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 上很好......所以你需要相应地切换实现。