document.exec命令不服从CSS

Question

我有一个contentEditable <div>，我正在变成一个非常简单的文本编辑器。当按下“tab”时，使用document.execCommand('insertUnorderedList');创建一个子弹点，效果很好。这是问题所在：

HTML：

<div id="wysiwyg">

</div>

CSS：

#wysiwyg{
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-weight: normal;
    font-size: 0.9em;
    color: rgb(70,70,70);
}

#wysiwyg ul li {
    font-family: 'Calendas Regular', serif !important;
    font-size: 1em; 
}

当我使用document.execCommand('insertUnorderedList');创建项目符号时，它的样式就好像它只是我#wysiwyg中的任何旧文本，而不是它是一个项目符号点，但如果我插入在#wysiwyg中的一些初始文本（通过HTML，而不是通过使用contentEditable-ness）然后它正确地设置项目符号。

任何想法是什么？

由于

Answer 1

不幸的是，这似乎是由基于WebKit的浏览器中的错误引起的（请参阅this answer）。我尝试过Safari，Chrome和Firefox，这个问题只出现在Chrome和Firefox上。不幸的是，除了不添加样式，等待修复或删除额外的HTML之外，您无能为力。如果您想删除额外的HTML，可能会发现Working around Chrome's contenteditable span bug有帮助。

注意：这是从我的评论中复制的。