深入剖析CSS布局中DIV为空时在IE6的不同表现

开发 前端
本文向大家描述一下CSS布局中DIV为空时在IE6的不同表现,在实际应用中为了特殊的需要而用到一个空的DIV,并定义一个较小的高度值。

 你对CSS布局中DIV为空时在IE6的不同表现是否了解,这里和大家分享一下,希望本文的介绍能让你有所收获。

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

在实际应用中为了特殊的需要而用到一个空的DIV,并定义一个较小的高度值.通常的想法见下面代码:

HTML 

  1. <div></div> 
  2. CSS  
  3. div{  
  4. height:5px;  
  5. }  

  以上代码在多数浏览器中都可正确显示,但我们在实际运用中,确不象理论上这么简单,特别的IE6中并非如你所想,好象有时可以定义高度,有时它就不知何原因失效了!

[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;思路就是超出部分隐藏起来,这也是一个很好的方法!

  说了那么多,我们只是的用测试的手段来分析一下总结出它的规律,当做一个技术研究,这样印象也深入一些,其实就两种方法,你只要记住这两种方法就可以了.

◆***种方法:

  1. div{  
  2. font-size:0;/*关于单位的写法是:如果是0值就可以不用写单位,  
  3. 非0值要写单位;(你同样可以写为0px.)*/  
  4. }  
  5.  

◆第二种方法

  1. div{  
  2. overflow:hidden;  
  3. }  
  4.  

原文链接:http://www.soidc.net/articles/1213781627945/20070530/1214037288269_1.html

【编辑推荐】

  1. IE6不支持的五大CSS选择符
  2. 探究IE8与IE7具体功能中窗口功能按钮的变化
  3. IE6 IE7 IE8三个版本的CSS兼容速查手册
  4. IE6下使用CSS定义DIV高度行之有效的办法
  5. 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题
责任编辑:佚名 来源: soidc.net
相关推荐

2010-09-02 16:18:33

CSSDIVIE6

2010-10-08 14:39:43

IE6DIVIE7

2010-08-18 15:41:38

IE6E7Firefox

2010-08-27 15:38:21

兼容IE6IE7

2010-08-18 15:22:28

IE6IE7Firefox

2010-08-18 10:37:16

IE6IE7IE8

2010-09-15 11:08:48

CSSIE6IE7

2010-08-19 14:43:49

IE6IE7IE8

2010-08-30 09:35:35

IE6IE7Firefox

2010-08-17 15:21:17

IEFirefoxHTML

2010-08-19 10:13:25

marginFFIE6

2010-08-18 13:45:07

IE6IE7FF

2010-08-16 13:39:18

DIV+CSS

2010-08-18 16:10:35

IE6CSS

2010-09-06 15:06:29

IE6IE7Firefox

2010-08-27 15:44:47

2009-08-13 10:12:07

IE的CSS Bug

2010-08-18 13:27:15

CSS兼容IE6

2010-09-15 14:00:06

position属性DIV

2010-08-18 16:18:59

IE6CSS
点赞
收藏

51CTO技术栈公众号