IE11中含contenteditable属性的span无法作为行内元素显示的修复方案咨询

这个IE11的兼容性坑确实挺让人抓狂的！针对你遇到的问题，这里有几个亲测有效的修复方案：

方案1：强制设置可编辑span的inline显示 #

IE11会把带有contenteditable="true"的span元素默认渲染成类似块级的元素，导致换行。我们可以通过CSS强制它保持inline状态，同时调整垂直对齐避免排版偏移：

/* 针对所有可编辑的span */
span[contenteditable="true"] {
  display: inline;
  vertical-align: top; /* 与左侧span保持对齐 */
  white-space: normal; /* 确保文本在宽度受限容器内正常换行 */
}

方案2：使用inline-block替代inline #

如果方案1效果不佳，可以尝试将可编辑span设置为inline-block，这种方式也能让两个span保持在同一行，同时保留可编辑功能：

span[contenteditable="true"] {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 30px); /* 手动调整宽度，避免超出容器 */
}

注意：这里的宽度需要根据左侧span的内容长度调整，比如左侧"4.5"大概占30px，所以用calc计算剩余宽度，确保整体不超出200px的容器宽度。

方案3：移除span之间的空白字符 #

虽然这个方案不一定能解决所有情况，但IE11对inline元素之间的空白解析有时候会引发异常，你可以尝试把两个span的代码写在同一行，移除它们之间的空格：

<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>

这三个方案里，方案1是最推荐的，它能最小程度地改变原有布局，同时解决换行问题。

内容的提问来源于stack exchange，提问作者user2173353