我們是否應該能夠信任空的DIV以HTML5顯示？

看到有關使用空DIV（見<DIV CLASS="somediv"></DIV>）似乎改變多年的建議我對當前關於當DIV沒有內部HTML時是否使用 的想法感到困惑。我們是否應該能夠信任空的DIV以HTML5顯示？

我無法確定我們是否可以依賴所有現代瀏覽器在沒有內部HTML的情況下正確顯示背景顏色和圖像的高度&高度，所以我想也許我們不能依靠在它上面 - 但它是這樣一個看似基本的區域。

我甚至看到過有關空DIV永遠不會被使用的建議 - 但是規格說真的說明空DIV是'錯誤的'，還是隻是不可靠？（我試圖找到他們的參考，但也許我使用錯誤的條款）。

爲了說明，這裏有5個區域，其中我通常會使用一個空DIV，在沒有任何建議替代的：

作爲用於內容的佔位符，其將隨後由XHR中獲取調用
作爲一種方法在佈局
在圖像被在CSS定義手動創建空間（作爲背景圖像，而是將有效地前景）
其中文本將來自CSS使用.somediv:after{content:SOMETEXT}
其中CSS用於顯示使用純色背景

圖酒吧等也許有對於這些不同的答案，這可能會在這個問題解釋的複雜性。

當然，我已經嘗試過發現，但例如SO問題Is necessary to show an empty <div>?暗示我有大量的「恕我直言」，「可能」，「似乎在這方面工作」。我預計到目前爲止，已經就最佳做法達成了一些官方共識。

那麼..我應該使用 ，如果是這樣，我應該設置字體大小爲與DIV寬度/高度中較小的值相同以確保所有瀏覽器中的空間都被填充？有沒有其他的CSS技巧可以確保在所有瀏覽器中都能正常工作？

來源

2013-06-28 dingles

當然，你可以依靠中，空元素仍然是在DOM元素，可以格式化。 – CBroe

您是否可以在任何地方找到任何證據證明，對於不一致的瀏覽器是否支持是否顯示空的'td'元素**具有*任何*與'div'的相關性？ – robertc

規格說明和瀏覽器做什麼是（最可悲的）非常分離的事情。根據（CSS）規範，關於背景屬性的空元素和非空元素應該沒有區別。 – artistoex

瀏覽器是不會放棄或忘記你的容器，只是因爲它沒有任何內容（還）。

如果你想在容器具有特定的佔位符形狀，那麼你可能給它min-height，min-width，height和width，並確保它的display: block;。

如果您仍然不確定，您可以填充spacer.gif/png而無需填充和邊距。

http://jsfiddle.net/APxNF/1/

來源

2013-06-28 11:15:41 DanFromGermany

感謝您的回答 - 爲了澄清，您是否會將該間隔符放入IMG標記中？我曾經鼓勵把一個頁面上的顯示圖像作爲DIV中的背景圖像，而不是IMG標籤，所以它看起來很具諷刺意味，我會使用IMG作爲我看不見的部分。現在我想也許有些時候，最好是隻使用一個好的老式IMG的第一個地方？！ – dingles

不同之處在於，背景圖片或非阻擋圖片，以及'img'都被阻擋。如果你給它更多的「高度」（除了它的實際內容），'div'不會伸展，除非你在其中放置了'min-height'或者在其中放置了一個阻塞的，不可見的'img'。 – DanFromGermany

我在我的答案中列舉了一些例子 – DanFromGermany

簡短的回答。是的，即使沒有內容，瀏覽器也會呈現div。

長的回答，那可能現在總是如此。我已經在網絡上工作了8年，從來沒有使用過這些，但無論如何他們都在這裏。

jsFiddle demo

HTML

<div class="empty1"></div> 
<div class="empty2"></div> 
<div class="empty3"></div>

CSS

.empty1 { 
    background: #FBB829; 
    height: 100px; 
    width: 100px; 
} 

.empty2:before { 
    content: "\00a0"; 
} 
.empty2 { 
    background: #FF0066; 
    height: 100px; 
    width: 100px; 
} 

.empty3 { 
    background: #F02311; 
    min-height: 1px; 
    height: 100px; 
    width: 100px; 
}

來源：

來源

2013-06-28 11:14:58 screenmutt

謝謝你的回答 - 只是爲了澄清，當你說你從來沒有使用過它們，你的意思是你從來沒有使用空的DIV，或者從來不必使用示例代碼來顯示空的DIV？謝謝。 – dingles

我們是否應該能夠信任空的DIV以HTML5顯示？

回答

相關問題