可编辑 div 中的初始文本在第一个换行符后向下移动

Question

我有这段几乎不错的代码。几乎是因为 IE 11 破坏了它：

.textarea {
    text-align: left;
    background: white;
    border: 1px solid grey;
    border-style: inset;
    height: 150px;
    overflow-y: auto;
    word-wrap: break-word;
    width: 400px;
}

<div class='textarea' contenteditable='true' id='sec1'>blabla</div>

为什么我点击return后文本（第一行）向下移动？我希望文本首先出现在它将落到的位置，或者只是停留在那里。即使 'first line' 是手动输入的，没有初始内容，也会发生这种情况。

Answer 1

发生这种情况是因为 IE 在您按回车键时添加了 p。使用 Shift + Enter 将像其他浏览器一样输入 br。

或者，您可以将其中的 p 元素设置为没有上边距的样式

.textarea {
    text-align: left;
    background: white;
    border: 1px solid grey;
    border-style: inset;
    height: 150px;
    overflow-y: auto;
    word-wrap: break-word;
    width: 400px;
}

.textarea p{margin-top:0;}

<div class='textarea' contenteditable='true' id='sec1'>blabla</div>

但基本问题是 IE 创建不同 HTML.
另请查看 avoid ie contentEditable element to create paragraphs on Enter key，它有自己的问题（ 在答案和评论中有解释 ）

编辑操作 首先感谢您的出色回答。其次，这就是我使用 JS 修复此问题的方法：

this.iebreak = function (event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        this.field.appendChild(document.createElement("br"));
    }
}

当然，如果您在

上，请添加此内容

this.field.addEventListener('keydown',function(event){thisObject.iebreak(event);});

可编辑 div 中的初始文本在第一个换行符后向下移动

Initial text in editable div moves down after first newline

html

css

internet-explorer-11