删除contenteditable div的内容，添加奇怪的字体元素

Question

我遇到了一个有问题的div。

div以带有样式的跨度开始，但是当我删除内容并且写入时出现一个新的元素字体，具有相同的字体但是已经转换了大小，24到5。

有什么问题？我该如何设置span ??

我举一个例子，当你从内容中删除所有内容时可以看到控制台日志并编写...

http://jsfiddle.net/bVvxp/

<div contenteditable="true" id="test">
        <span style="font-family:Arial;font-size:24px;">Hello!!!</span>
</div>

P.S。 抱歉，我的学校英语不好，感谢所有人!!!

Answer 1

您可以简单地将字体属性设置为span的父元素（在您的情况下为#test）。 如果这样做，则不必在span中指定字体属性;他们只会被遗传。 所以只需在你的小提琴中改变这个CSS规则

#test{width:300px; height:200px; background-color:black; color:white;}

到

#test{width:300px; height:200px; background-color:black; color:white; font-family:Arial;font-size:24px;}

如果您只想定位#test div中的特定子元素，可以添加这样的CSS行：

#test span {font-family:Arial;font-size:24px;}

编辑：您的问题发生的原因：当您删除'Hello !!!'时来自#test，也删除了跨度，删除了所有字体样式。这就是为什么你必须把字体样式放在#test上。我重新编辑了小提琴，你会看到每次你输出#test时，你的字体大小保持不变;和#test没有子元素。 http://jsfiddle.net/bVvxp/4/