内联contenteditable标签无法在IE中正确对齐 [英] Inline contenteditable tags fail to align correctly in IE
问题描述
我遇到的情况是,我具有内联的contenteditable span标签以及其他非contenteditable标签,它们在IE之外的所有浏览器中都可以正常工作。在IE中,标签无法充当内联标签,并开始强制将其自身对齐为块(某种)。我需要一些东西使它们充当内联。
I have a situation where I have inline contenteditable span tags together with other non-contenteditable tags which work fine in all browsers except for IE. In IE the tags fail to act as inline and start forcibly aligning themselves as block (sort of). I need something to make them act as inline. It seems that IE is forcing some weird behaviour when the tag is contentedtiable.
<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/
在IE和Chrome中打开小提琴(例如)以查看它们之间的区别。
Open the fiddle in both IE and Chrome (for example) to see the difference.
推荐答案
在我的情况下,我使用了:before
和:after
伪元素来实现这一点。
In my case, I used the :before
and :after
pseudo-elements to achieve this.
[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>
这会使伪元素部分不可编辑,而其余部分则可编辑。
This keeps the pseudo-element part non-editable and the rest editable.
虽然UX仅在IE上有效,但是...
The UX is only good on IE though...
这篇关于内联contenteditable标签无法在IE中正确对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!