IE6下font-size值设置与否对元素height,background产生的影响(二)
2012-07-18 11:36
330 查看
其实之前做日常项目的时候,发现了font-size设置在IE6下带来的问题,然后去查了下,是由于IE6下div中的默认font-size值是12px,这篇博文有讲到,IE6中设置div的最小高度 ,然后,我自己也写个例子测试一下。仅用IE6和chrome进行对比测试。首先在页面中定义两个div标签,宽度*高度为200px*30px
<div id="Layer1">div1</div>
<div id="Layer2">div2</div>
然后设定其样式,如下:
#Layer1 {
position:absolute;
width:200px;
height:30px;
left: 75px;
top: 128px;
background-color: purple;
}
#Layer2 {
position:absolute;
width:200px;
height:30px;
left: 282px;
top: 128px;
background-color: green;
}
这时IE6下是正常显示的,而且没有设置font-size的值,其他浏览器中也显示ok。接下来,我们改变div的样式。将#Layer2的font-size的值设置为40px,这时候IE6下和chrome下面显示就有区别了。css代码:
#Layer2 {
position:absolute;
width:200px;
height:30px;
left: 282px;
top: 128px;
font-size: 40px;
background-color: green;
}
IE6下,#Layer2的高度被撑高,且大于40px,而chrome下面只是字体变大而已,如图:
突发奇想,我在#Layer2中,加上overflow:hidden,会怎样呢?css代码如下:
#Layer2 {
position:absolute;
width:200px;
height:30px;
left: 282px;
top: 128px;
font-size: 40px;
background-color: green;
overflow: hidden;
}
这时候,IE6和chrome下都是一样的,IE6会把超出的部分截断掉,如图:
(IE6和chrome一样的效果)下面,我们把div中的文字去掉,去掉文字带来的影响,看看会有什么新的效果出现。
<div id="Layer1"></div>
<div id="Layer2"></div>
#Layer1设置height为1px,#Layer2设置为5px;
#Layer1 {
position:absolute;
width:200px;
left: 75px;
top: 128px;
height: 1px;
background-color: purple;
}
#Layer2 {
position:absolute;
width:200px;
left: 282px;
top: 128px;
height: 5px;
background-color: green;
}
我们可以看到chrome下面#Layer1和#Layer2显示高度分别为1px和5px,而IE6下高度一样。
那个这个高度是不是默认的font-size:12px的高度呢?
修改css代码,设置#Layer1和#Layer2的高度均为4px,排除高度设置的影响,然后设置#Layer1的font-size为12px。
#Layer1 {
position:absolute;
width:200px;
left: 75px;
top: 128px;
height: 4px;
font-size:12px;
background-color: purple;
}
#Layer2 {
position:absolute;
width:200px;
left: 282px;
top: 128px;
height: 4px;
background-color: green;
}
这时候IE6下面,没有设置font-size的#Layer2的高度大于设置了font-size:12px的#Layer1,而chrome下面高度均为4px,可见IE6下面其默认font-size值可能不是12px。
最终,经过测试,IE6下,当#Layer1的font-size设置为16px的时候,跟未设置font-size的#Layer2的高度相等。而与font-size:16px对应的高度为18px。以上的结果是在IEtester下验证得出的,为了避免ITtester的差异性,我在本地虚拟机中运行标准IE6进行了测试,效果是一样的。所以,我怀疑IE6下div的默认font-size可能是16px,而不是网上流传的12px。
如果设置font-size>height值会有什么影响呢?
css代码:
#Layer1 {
position:absolute;
width:200px;
left: 75px;
top: 128px;
height: 40px;
font-size:30px;
background-color: purple;
}
#Layer2 {
position:absolute;
width:200px;
left: 282px;
top: 128px;
height: 40px;
font-size:50px;
background-color: green;
}
如下图所示,IE6下,font-size>height的时候,其div高度也会相应的大些;而chrome下面,高度不变。
结论:1.如果在IE6下,想要让带background的div显示所设置的height的高度,需要保证font-size<height。如果font-size>height,在IE6下面,会高于所设置的height值。
2. IE6下,div中的默认font-size值可能是16px。
<div id="Layer1">div1</div>
<div id="Layer2">div2</div>
然后设定其样式,如下:
#Layer1 {
position:absolute;
width:200px;
height:30px;
left: 75px;
top: 128px;
background-color: purple;
}
#Layer2 {
position:absolute;
width:200px;
height:30px;
left: 282px;
top: 128px;
background-color: green;
}
这时IE6下是正常显示的,而且没有设置font-size的值,其他浏览器中也显示ok。接下来,我们改变div的样式。将#Layer2的font-size的值设置为40px,这时候IE6下和chrome下面显示就有区别了。css代码:
#Layer2 {
position:absolute;
width:200px;
height:30px;
left: 282px;
top: 128px;
font-size: 40px;
background-color: green;
}
IE6下,#Layer2的高度被撑高,且大于40px,而chrome下面只是字体变大而已,如图:
突发奇想,我在#Layer2中,加上overflow:hidden,会怎样呢?css代码如下:
#Layer2 {
position:absolute;
width:200px;
height:30px;
left: 282px;
top: 128px;
font-size: 40px;
background-color: green;
overflow: hidden;
}
这时候,IE6和chrome下都是一样的,IE6会把超出的部分截断掉,如图:
(IE6和chrome一样的效果)下面,我们把div中的文字去掉,去掉文字带来的影响,看看会有什么新的效果出现。
<div id="Layer1"></div>
<div id="Layer2"></div>
#Layer1设置height为1px,#Layer2设置为5px;
#Layer1 {
position:absolute;
width:200px;
left: 75px;
top: 128px;
height: 1px;
background-color: purple;
}
#Layer2 {
position:absolute;
width:200px;
left: 282px;
top: 128px;
height: 5px;
background-color: green;
}
我们可以看到chrome下面#Layer1和#Layer2显示高度分别为1px和5px,而IE6下高度一样。
那个这个高度是不是默认的font-size:12px的高度呢?
修改css代码,设置#Layer1和#Layer2的高度均为4px,排除高度设置的影响,然后设置#Layer1的font-size为12px。
#Layer1 {
position:absolute;
width:200px;
left: 75px;
top: 128px;
height: 4px;
font-size:12px;
background-color: purple;
}
#Layer2 {
position:absolute;
width:200px;
left: 282px;
top: 128px;
height: 4px;
background-color: green;
}
这时候IE6下面,没有设置font-size的#Layer2的高度大于设置了font-size:12px的#Layer1,而chrome下面高度均为4px,可见IE6下面其默认font-size值可能不是12px。
最终,经过测试,IE6下,当#Layer1的font-size设置为16px的时候,跟未设置font-size的#Layer2的高度相等。而与font-size:16px对应的高度为18px。以上的结果是在IEtester下验证得出的,为了避免ITtester的差异性,我在本地虚拟机中运行标准IE6进行了测试,效果是一样的。所以,我怀疑IE6下div的默认font-size可能是16px,而不是网上流传的12px。
如果设置font-size>height值会有什么影响呢?
css代码:
#Layer1 {
position:absolute;
width:200px;
left: 75px;
top: 128px;
height: 40px;
font-size:30px;
background-color: purple;
}
#Layer2 {
position:absolute;
width:200px;
left: 282px;
top: 128px;
height: 40px;
font-size:50px;
background-color: green;
}
如下图所示,IE6下,font-size>height的时候,其div高度也会相应的大些;而chrome下面,高度不变。
结论:1.如果在IE6下,想要让带background的div显示所设置的height的高度,需要保证font-size<height。如果font-size>height,在IE6下面,会高于所设置的height值。
2. IE6下,div中的默认font-size值可能是16px。
相关文章推荐
- IE6下font-size值设置与否对元素height,background产生的影响(一)
- IE6下font-size值设置与否对元素height,background产生的影响(二)
- IE6下font-size值设置与否对元素height,background产生的影响(一)
- IE6下面,为什么不能设置height:1px的元素
- User select font-face/color/size/backgroundColor设置 字体,颜色,大小,背景色兼容主流浏览器
- IE6下不能设置height:1px的元素是什么原因如何解决
- User select font-face/color/size/backgroundColor设置 字体,颜色,大小,背景色兼容主流浏览器
- IE6 BUG诡异的行内替换元素设置浮动并设置text-indent:xx px 影响相邻元素布局
- font-size问题——当你设置font-size为12px时height为14,每增加一个像素高度相应就增加二个像素
- User select font-face/color/size/backgroundColor设置 字体,颜色,大小,背景色兼容主流浏览器
- H5 手机页面字体显示大小与css设置不一致,viewport影响font-size问题
- Jquery 设置字体大小(font-size)与行高(line-height)
- 前端新手——适配不同手机端页面的方案,动态查询dpr设置根元素font-size
- 前端新手——适配不同手机端页面的方案,动态查询dpr设置根元素font-size
- 在IE6里面当元素浮动后再设置margin那么就会产生双倍边距
- 利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8
- safair下html换行产生的间距设置font-size:0无效
- font-size,line-height,text-indent大小的设置方法(px,em,百分数)及其继承性
- 当内嵌元素和图片一起在一个div里设置line-height时,出现不同时居中的情况
- jquery之修改元素样式(获取和设置样式,使用css(),width(),height()方法)