【发布时间】：2013-08-25 09:10:03
【问题描述】：
我有一个内容可编辑的 div，里面有一个 ul 和一些 li。现在，如果我想在列表后面添加更多文本，我将光标放在最后一个 li（“3”）之后，然后按两次 Enter。在第一次输入后，它添加了一个新的 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 代码中插入它喜欢的任何内容。
【问题讨论】：
-
您具体输入了什么内容以及您在哪个浏览器上进行测试？当我在 Firefox 中执行此操作时（在 3、2x 后单击以跳出列表，键入文本），我得到
<li>3</li></ul><p>text<br></p><ul> </ul>即没有样式的p和额外的ul。 -
对不起，忘了说...问题出现在Chrome 29。在3、2x回车后点击，就会得到我上面写的“Resulting code”。
-
所以每个浏览器都不同。那我不知道你有没有什么可以做的。您总是可以编写一个 Javascript 例程来检查是否存在
<font>元素，或者在 Firefox 的情况下检查是否存在空<ul>元素，但这感觉像是一个补丁，而不是真正的解决方案。
标签： html css browser contenteditable