Can't get to empty paragraphs in contentEditable

contenteditable, css, html, javascript

Solution

You can add

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

And it seems to work: http://jsfiddle.net/hE8zS/3/

This page contains information on browser compatibility: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Problem

I have a contentEditable article, with "EmbeddedSection" div's (recursive) which have a paragraph above and below them. In chrome, if the paragraph is empty, you can't actually get to it. In IE you can, but the size is all wrong. 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> ``` Does anybody know if I'm able to style the empty paragraphs or somehow mark them as something which enables them to be reachable? (Note: putting even a single whitespace character works, even after the user has edited and removed that whitespace character.)

Original source