在實際應用中為了特殊的需要而用到一個空的DIV,並定義一個較小的高度值．通常的想法見下面代碼：
HTML
<div></div>
CSS
div{
height:5px;
}
以上代碼在多數瀏覽器中都可正確顯示，但我們在實際運用中，確不象理論上這麼簡單，特別的IE6中並非如你所想，好象有時可以定義高度，有時它就不知何原因失效了！
先給出我的測試代碼，然後在詳細說明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">h3{margin:10px 0;padding:0;}body{background:white; color:black; font-size:12px;}.content{width:400px;border:solid 1px red;}p{color:black;background:green;margin:0;padding:0;}.t{height:6px;width:600px;background:red;}.b{width:200px; background:#000;height:5px;}.b0{background:#000; font-size:0px;}.b1{width:200px; background:#000; font-size:1px;}.b2{width:200px; background:#000; font-size:2px;}.b3{width:200px; background:#000; font-size:3px;}.b4{width:200px; background:#000; font-size:4px;}.b5{width:200px; background:#000; font-size:5px;}.b6{width:200px; background:#000; font-size:6px;}.b7{width:200px; background:#000; font-size:7px;}.b8{width:200px; background:#000; font-size:8px;}.b9{width:200px; background:#000; font-size:9px;}.b10{width:200px; background:#000; font-size:10px;}.b11{width:200px; background:#000; font-size:11px;}.b12{width:200px; background:#000; font-size:12px;}</style></head><body><h2>空DIV在IE6瀏覽器中的不同表現形式</h2><h3>一．空DIV無樣式時的表現</h3><div class="content"> <p>something</p> <div></div> <p>something</p></div><h3>二．空DIV加入寬度後的表現</h3><div class="content"> <p>something</p> <div class="b"></div> <p>something</p></div><h3>二．空DIV加入寬度＋字型後的表現</h3><h3>0.空DIVfont-size:0px;實際height=2px;</h3><div class="content"> <p>something</p> <div class="b0"></div> <p>something</p></div><h3>1.空DIVfont-size:1px;實際height=2px;</h3><div class="content"> <p>something</p> <div class="b1"></div> <p>something</p></div><h3>2.空DIVfont-size:2px;實際height=2px;</h3><div class="content"> <p>something</p> <div class="b2"></div> <p>something</p></div><h3>3.空DIVfont-size:3px;實際height=4px;</h3><div class="content"> <p>something</p> <div class="b3"></div> <p>something</p></div><h3>4.空DIVfont-size:4px;實際height=5px;</h3><div class="content"> <p>something</p> <div class="b4"></div> <p>something</p></div><h3>5.空DIVfont-size:5px;;實際height=5px;</h3><div class="content"> <p>something</p> <div class="b5"></div> <p>something</p></div><h3>6.空DIVfont-size:6px;實際height=6px;</h3><div class="content"> <p>something</p> <div class="b6"></div> <p>something</p></div><h3>7.空DIVfont-size:7px;實際height=8px;</h3><div class="content"> <p>something</p> <div class="b7"></div> <p>something</p></div><h3>8.空DIVfont-size:8px;實際height=10px;</h3><div class="content"> <p>something</p> <div class="b8"></div> <p>something</p></div><h3>9.空DIVfont-size:9px;實際height=12px;</h3><div class="content"> <p>something</p> <div class="b9"></div> <p>something</p></div><h3>10.空DIVfont-size:10px;;實際height=12px;</h3><div class="content"> <p>something</p> <div class="b10"></div> <p>something</p></div><h3>11.空DIVfont-size:11px;實際height=14px;</h3><div class="content"> <p>something</p> <div class="b11"></div> <p>something</p></div><h3>12.空DIVfont-size:12px;;實際height=15px;</h3><div class="content"> <p>something</p> <div class="b12"></div> <p>something</p></div></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
分析：從代碼中我總結了一些知識點
1.當一個空DIV只給高度時，它的高度在IE6下是可控的．一些元素如background-color,border...都不會影響高度的值；
2.如樣式中有了height的話那IE會預設會有一個高度，其它的值如zoom:1也會產生這個＂layout＂可以自己嘗試測試其它樣式；
3.空DIV如果付與了一個＂layout＂的話，那麼它的高度就與文字大小有關了，具體的文字大小所顯示的實際高度值從測試頁中可見；
4.可以看出IE所能顯示的文字的最小高度值為2PX；
5.在實際解決問題中，我們就根據它的特點，因材施教，在樣式中加入font-size:數值；如果height:12px;那麼你的font-size要小於等於10px,也就是最大值可取到10px;在大的話會被文字撐開（撐開內容是IE6以下版本的一個BUG），所以最省事的方法也就是設定文字大小為0；
以都是用設字型大小的辦法解決問題，有的人還要加入一個行高，經測試行高對高度沒有影響．所以加入行高沒有必要．
第二個解決問題的方法是加入overflow:hidden;思路就是超出部分隱藏起來，這也是一個很好的方法！
說了那麼多，我們只是的用測試的手段來分析一下總結出它的規律，當做一個技術研究，這樣印象也深入一些，其實就兩種方法，你只要記住這兩種方法就可以了．
第一種方法：
div{
font-size:0;/*關於單位的寫法是：如果是0值就可以不用寫單位，非0值要寫單位；（你同樣可以寫為0px．）*/
}
第二種方法
div{
overflow:hidden;
}
purecss語：讓我們一起在這裡成長起來！祝每位看這篇文章的網友學習進步！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
