带有红色边框的空div显示为红线 - 我可以仅使用CSS隐藏它吗？

Question

我有一个div，其中将表示错误。我的问题是，因为它有一个红色边框，即使div为空（没有错误），它也会显示为空行。我不喜欢这种行为;我希望div在空的时候完全不可见。

另外，我不想用javascript这样做 - 当div只用CSS时是否可以隐藏边框？

Answer 1

查看此CSS3 pseudoclass :empty

​div{
    border:1px solid red
}

div:empty{
    display:none
}

http://jsfiddle.net/nWRJb/1/

Answer 2

是。以下是使用empty-cells：

的一种可能解决方案

<强> CSS

.error {
    display:table-cell;
    empty-cells:hide;
    padding: 10px;
    border: 1px solid red;
}

<强> HTML

<div class="error"><!-- I am empty --></div>
<div class="error">Error'd!</div>

http://jsfiddle.net/At6Sp/

Answer 3

最好的方法是从服务器端控制它，如果它是空的则不要显示。 否则你可以使用：empty选择器，但它在IE中的支持不稳定。

是的，如果你使用jquery那么你会没事的。

$(document).ready(function() { $('div:empty').remove(); });