IE7、IE8、Firefox中实现DIV自动适应高度

开发 前端
本文向大家描述一下DIV+CSS在IE7、IE8、Firefox中如何实现DIV自动适应高度,其中IE8下共有三种设置方法,希望本文介绍对你有所帮助。

你对DIV+CSS在IE7、IE8、Firefox中实现DIV自动适应高度的方法是否了解,这里和大家分享一下,相信本文介绍一定会让你有所收获。

DIV+CSS在IE7、IE8、Firefox中实现DIV自动适应高度

IE7 、Firefox下设置

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px;这里为了照顾不认识min-height的IE6可以这样定义: 

  1. {  
  2. height:auto!important;  
  3. height:200px;  
  4. min-height:200px;  

IE8下设置

◆额外标签法

  这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。我个人不喜欢这种方法,但是它确实是W3C推荐的方法:

  1. 1<DIVstyleDIVstyle="clear:both;"></DIV> 

或者使用 

  1. 1<brstylebrstyle="clear:both;"/> 
  2.  

◆使用after伪类

  这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。

  这种方法兼容性一般,但经过各种hack也可以应付不同浏览器了,同时又可以保证html比较干净,所以用得还是比较多的。 

  1. 1#outer:after{  
  2. 2content:".";  
  3. 3height:0;  
  4. 4visibility:hidden;  
  5. 5display:block;  
  6. 6clear:both;  
  7. 7} 

设置overflow为hidden或者auto{IE8常见内部浮动外部高度不适应解决方法}

  这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素。不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你***是能在多个浏览器上测试你的页面。

◆浮动外部元素,float-in-float

  这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在IE/Win和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。

【编辑推荐】

  1. 热点透视 DIV CSS***兼容IE6 IE7 FF的通用方法
  2. 探究IE8与IE7具体功能中窗口功能按钮的变化
  3. IE6 IE7 IE8三个版本的CSS兼容速查手册
  4. 探秘IE8 JavaScript功能超乎想象
  5. 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题

 

责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-09-16 13:17:31

IE6IE7IE8

2010-08-20 09:33:22

IE6IE7IE8

2010-08-18 15:57:14

IE6IE7IE8

2010-09-16 13:33:47

IE6IE7IE8

2011-03-08 11:14:35

IE7、IE8、IE

2010-08-20 08:45:55

IE6IE7IE8

2010-08-19 14:09:47

IE7IE8

2010-09-08 16:59:48

CSS兼容IE7IE8

2010-08-19 10:56:55

JSIE6IE7

2009-08-13 10:12:07

IE的CSS Bug

2010-08-18 10:37:16

IE6IE7IE8

2010-09-15 11:08:48

CSSIE6IE7

2010-08-18 10:24:51

IE6IE7IE8

2010-08-19 09:24:20

CSS兼容IE7IE8

2010-09-15 10:14:19

IE7IE8兼容CSS

2010-08-27 14:55:23

IE6IE7IE8

2010-08-18 15:22:28

IE6IE7Firefox

2010-08-19 16:30:01

2010-08-27 14:29:37

IE8IE7

2010-08-18 11:13:57

点赞
收藏

51CTO技术栈公众号