Question

我有一个满足感的div，里面有一些ul和一些li。现在，如果我想在列表后面添加更多文本，我将光标放在最后一个li（“3”）之后，然后按两次输入。在第一次输入后，它会添加一个新的li，然后在第二次输入后关闭ul并在其中添加一个带有br的div，以便我可以开始写入它。（Example #1）

预期代码：

<div contenteditable="true">
<p>Test</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul><div><br></div>
</div>

这是预期的行为。但是如果为li定义了一些样式表，浏览器不仅会添加带有br的新div，而且还会根据您定义的样式添加不同的代码（Example #2）。

结果代码：

<div contenteditable="true">
<p>Test</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul><div><font face="Arial"><span style="line-height: 20px;"><br></span></font></div>
</div>

如何防止此浏览器行为？我确实想为li提供一些样式表，但我不希望浏览器在我的html代码中插入任何它喜欢的内容。

Answer 1

这是Blink和Webkit（Chrome，Opera，Safari）错误中较大的一组。在CKEditor的开发站点上有一个ticket grouping some of them，我也在Blink和Webkit的网站上报告了它：

但没有人回复......; /

如前所述，只有两种方法可以摆脱这个问题：

编写自己的退格键，删除并输入键支持（非常复杂），
不要使用任何造型（非常不酷）。

所以我担心目前除了提醒Blink和Webkit团队他们的引擎不应该生成这个糟糕的HTML之外别无选择。

浏览器会在输入contenteditable div时自动插入不需要的代码

1 个答案: