Inline content tags don't align correctly in IE
I have a situation where I have inline contenteditable span tags along with other non-contenteditable tags that work fine in all browsers except IE. In IE, tags don't act like inline and start to force-align like a block (sort of). I need something to make them act inline. It seems like IE is causing some strange behavior when the tag is contentitiable.
<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>
Here is a fiddle with an example: http://jsfiddle.net/glennmicallef/m7tkgo2u/
Open the fiddle in IE and Chrome (for example) to see the difference.
source to share
In my case, I used pseudo-elements :before
and for this :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>
This makes part of the pseudo-element uneditable and the rest editable.
UX is only good in IE, though ...
source to share