我遇到的情况是，我有内联 contenteditable span 标签以及其他非 contenteditable 标签，这些标签在除 IE 之外的所有浏览器中都可以正常工作。在 IE 中，标签无法充当内联标签，并开始强制将自身对齐为块（某种程度上）。我需要一些东西让它们充当内联。当标签是 contentedtiable 时，IE 似乎会强制执行一些奇怪的行为。
<div class="container">
<span class="text" contenteditable="true">Lorem ipsum dolor </span>
<span class="tag">Tag</span>
<span class="text" contenteditable="true"> sed dignissim maximus mattis </span>
<span class="tag">Tag</span>
<span class="text" contenteditable="true"> vel ex ut nisi elementum tincidunt libero</span>
这是一个例子：http://jsfiddle.net/glennmicallef/m7tkgo2u/ http://jsfiddle.net/glennmicallef/m7tkgo2u/
在 IE 和 Chrome 中打开 fiddle（例如）以查看差异。
就我而言，我使用了:before and :after伪元素来实现这一点。
[contenteditable=true]:before {
content: attr(before-content);
margin-right: 2px;
}
<div class="container">
<span class="text" contenteditable="true">Lorem ipsum dolor </span>
<span before-content="Tag" contenteditable="true"> sed dignissim maximus mattis </span>
<span before-content="Tag" contenteditable="true"> vel ex ut nisi elementum tincidunt libero</span>
</div>
这使得伪元素部分不可编辑，其余部分可编辑。
UX 只在 IE 上好...
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
