javascript - Can't get to empty paragraphs in contentEditable -

i have contenteditable article, "embeddedsection" div's (recursive) have paragraph above , below them. in chrome, if paragraph empty, can't it. in ie can, size 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 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 here, not 1 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 element-->     </div> </article> 

does know if i'm able style empty paragraphs or somehow mark them enables them reachable?

(note: putting single whitespace character works, after user has edited , removed whitespace character.)

you can add

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

and seems work: http://jsfiddle.net/he8zs/3/

this page contains information on browser compatibility: https://developer.mozilla.org/en-us/docs/web/css/:empty