我有一篇contentEditable文章,其中包含" EmbeddedSection" div(递归),在其上方和下方有一个段落。在chrome中,如果段落为空,则实际上无法实现。在IE中,你可以,但大小都是错误的。
<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>
有人知道我是否能够设置空段落的样式,或者以某种方式将它们标记为可以使它们可以访问的东西?
(注意:即使在用户编辑并删除了该空白字符之后,即使只有一个空格字符也能正常工作。)
答案 0 :(得分:6)
您可以添加
:empty {
display: block;
height: 1em;
}
似乎有效:http://jsfiddle.net/hE8zS/3/
此页面包含有关浏览器兼容性的信息:https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
答案 1 :(得分:0)
我实际上已经开始使用了:空,因为它没有选择正确,并且不满足于满足。
我实际上最终在任何空的段落(以及一些相关的javascript在keypress上跳过它)放入零宽度空白,这意味着它正确地调整大小,并且与contenteditables很好地配合。在此处查看我的错误报告http://code.google.com/p/chromium/issues/detail?id=292334
答案 2 :(得分:0)
contenteditables的简单占位符:
[contenteditable]:empty::before {
content: 'Your Placeholder Text';
color: rgba(0,0,0,0.2);
}