当前位置导航:炫浪网>>网络学院>>网页制作>>HTML与CSS教程

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

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

 

分析:从代码中我总结了一些知识点

  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语:让我们一起在这里成长起来!祝每位看这篇文章的网友学习进步!

相关内容
赞助商链接