帶紅色邊框的空白div顯示爲紅色線條 - 我可以用CSS隱藏它嗎？

我有一個div，其中將表示錯誤。我的問題是，因爲它有一個紅色的邊框，即使div爲空（沒有錯誤），它也會顯示爲空行。我不喜歡這種行爲;我更喜歡div在空的時候完全不可見。帶紅色邊框的空白div顯示爲紅色線條 - 我可以用CSS隱藏它嗎？

此外，我不想用javascript做到這一點—是否有可能隱藏的邊界時div只有CSS空？

2012-02-23 Serafeim

請更好地瞭解您的代碼 – sandeep 2012-02-23 06:40:03

是的。下面是使用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>

2012-02-23 06:43:25 Interrobang

儘管如此，它仍然佔了邊框。即使沒有填充，邊界在那裏，只是看不見。這有點讓人分心。：P – Purag 2012-02-23 06:49:36

如果div獨立或類似，沒有人會注意到額外的2px行高。有很多地方可以以完全有效的方式使用這樣的建築。如果他試圖把它放在兩個項目之間，那麼你是對的 - 這會讓人分心。 – Interrobang 2012-02-23 06:50:55

雖然+1，因爲我不知道'空細胞'。你可能應該包含一個指向該規範的鏈接。 – Purag 2012-02-23 06:58:22

div{ 
    border:1px solid red 
} 

div:empty{ 
    display:none 
}

2012-02-23 06:47:15 Joseph

+1，但沒有IE的支持意味着這真的不是一個可行的現實世界的解決方案：（ – Interrobang 2012-02-23 06:51:55

+1：空屬性 – sandeep 2012-02-23 06:52:16

但至少它是向現代化邁進的一步，也可以使用http://selectivizr.com/加上你選擇的JS庫，這樣它就可以在IE – Joseph 2012-02-23 06:55:49

最好的辦法是從服務器端控制它，如果它的空不顯示。否則你可以使用：空選擇器，但它在IE中的支持並不穩固。

是的，如果你使用jQuery，那麼你會沒事的。

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

2012-02-23 06:59:34

+1，我不明白爲什麼如果沒有任何錯誤，他根本無法防止元素被寫入。 – Interrobang 2012-02-23 07:00:45

回答