首页 > > 网页制作 > css >

CSS布局中DIV为空时在IE6的不同表现

2008-02-23 08:41:24来源：互联网阅读 ()

　　在实际应用中为了特殊的需要而用到一个空的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>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有