Line break before and after inline contenteditable element in IE

问题

I need to make inline element contenteditable. It works fine for Chrome/Firefox, but IE (11 at least) inserts line break before and after span if it's contenteditable.

Link to fiddle: https://jsfiddle.net/nokpy02g/1/

This is how it looks like in Chrome:

And this is IE:

Is there is any way to fix it?

UPD:

My IE version:

IE mode on my fiddle page:

Also, I am using Windows 7 Professional, 64bit

回答1:

Be aware: contentEditable is extremely buggy and inconsistent across all browsers and even versions. You are much, much better of using a JS WYSIWYG editor like CKEditor (which can edit inline). For example, some browsers will wrap the previous block of text when pressing Enter in a  or <div> or , while others will enter  . Sometimes a   or two must be at the front or end. Two  s count as a single line...until it doesn't. IE doesn't support contentEditable properly in table or inline elements. Pasting inserts HTML rather than text. The problems go on and on, and will cause you endless frustration.

回答2:

In my case, I used the :before and :after pseudo-elements to achieve this. 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>

This keeps the first part ("4.5") non-editable and the rest editable.

Span with contenteditable attribute won't behave as an inline element in IE11

来源：https://stackoverflow.com/questions/36862119/line-break-before-and-after-inline-contenteditable-element-in-ie

标签

css

internet-explorer

frontend

contenteditable