無內容div占據空間的觸發條件和解決方法_Web標準教程

當在div標簽內無任何內容時：

<div></div>

如果給div元素<b>設置了寬度<b>時，比如width:100%，此時div在IE中（IE6，IE7）將占據物理空間，而在FF中不占據物理空間（正確理解）。為了表述直觀，將樣式直接寫在元素標簽內：

<div style="width:100%"></div>

此時在IE中到底是什么在影響著最終的顯示，又是如何解析的呢？

可能的影響因素：字體大�。╢ont-size），字體行高（line-height），高度（height），溢出（overflow）

我們對上面的代碼逐一添加過濾屬性（具體的過程有興趣的朋友，可以私下里實驗一下，“自己動手，豐衣足食”�。�

在測試的過程中，你會發現IE6和IE7的解析也不盡相同，比如在給div設置了line-height:0; height:0; 的樣式后，IE7中顯示正常了，不再占據物理空間了，而IE6卻依然我行我素，亦或是悲！

最終的測試結果，最簡單的方法是，給div設置高度（height）和溢出（overflow）屬性：

<div style="width:100%;height:0;overflow:hidden; "></div>