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>

为什么在我点击后文字（第一行）会向下移动？我希望文本首先出现在哪里，或者只是留在那里。即使手动输入“第一行”而没有初始内容，也会发生这种情况。

Answer 1

这是因为当您按Enter键时，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（在答案中解释并在那里评论）

来自op 的编辑首先要感谢你的答案。其次，这就是我用JS修复它的方法：

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

当然，如果您的'on ie。：

，请添加此项

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

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

1 个答案: