javascript - 无法进入 contentEditable 中的空段落

Question

我有一篇 contentEditable 文章，其中包含“EmbeddedSection”div（递归），在它们的上方和下方都有一段。在 chrome 中，如果该段落为空，您实际上无法访问它。在 IE 中你可以，但大小都是错误的。

http://jsfiddle.net/hE8zS/1/

<article contenteditable="true">
   <p><span class="numbering">Title</span><span class="TextChunk"></span></p>
   <div class="EmbeddedSection">
       <p><span class="numbering">1</span><span class="TextChunk">Section Title</span></p>   
       <div class="EmbeddedSection">
           <p><span class="numbering">1.1</span><span class="TextChunk">Embedded title</span></p>
           <p><span class="TextChunk">Th</span><span class="TextChunk">e </span><span class="TextChunk">.</span></p>
       </div>
       <p><span class="TextChunk"></span></p> <!--Can't get to this element-->
       <div class="EmbeddedSection">
           <p class="Paragraph"><span class="numbering">1.2</span><span class="TextChunk">Another title</span></p>
           <p class="Paragraph"><span class="TextChunk">Blah blah blah</span></p>
       </div>
       <p><span class="TextChunk">Can get here, but not the one above 1.2 in chrome (ie gets there).</span></p>
       <div class="EmbeddedSection">
           <p class="Paragraph"><span class="numbering">1.3</span><span class="TextChunk">Another title</span></p>
           <p class="Paragraph"><span class="TextChunk">Blah blah blah</span></p>
        </div>
        <p><span class="TextChunk"></span></p> <!--Can't get to this element-->
    </div>
</article>

有谁知道我是否能够设置空段落的样式或以某种方式将它们标记为使它们可以访问的东西？

（注意：即使在用户编辑并删除了该空白字符之后，也可以放置单个空白字符。）

Answer 1

你可以加

:empty {
    display: block;
    height: 1em;
}

它似乎工作：http: //jsfiddle.net/hE8zS/3/

此页面包含有关浏览器兼容性的信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Answer 2

contenteditables 的简单占位符：

[contenteditable]:empty::before {
    content: 'Your Placeholder Text';
    color: rgba(0,0,0,0.2);
}

Answer 3

实际上，我已经不再使用 :empty 了，因为它选择不正确，并且与 contenteditable 不兼容。

实际上，我最终在任何空的段落中放入了一个零宽度的空格（以及一些相关的 javascript 在按键上跳过它），这意味着它的大小正确，并且可以很好地与 contenteditables 配合使用。在此处查看我的 chrome 错误报告http://code.google.com/p/chromium/issues/detail?id=292334