论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

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

文章类别:div+css布局 | 发表日期:2008-9-26 11:13:54

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
HTML
<div></div>
CSS
div{
height:5px;
}

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

  先给出我的测试代码,然后在具体说明:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

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

  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 css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
div{
font-size:0;/*关于单位的写法是:假如是0值就可以不用写单位,非0值要写单位;(你同样可以写为0px.)*/
}

第二种方法

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
div{
overflow:hidden;
}

purecss语:让我们一起在这里成长起来!祝每位看这篇文章的网友学习进步!
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058