学习DIV float在ff和ie下的布局区别

开发 前端
本文向大家介绍一下DIV float在ff和ie下的布局区别,DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。

你对DIV float在ff和ie下的布局区别是否了解,这里和大家分享一下,DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

学习DIV float在ff和ie下的布局区别

基本HTML代码
 

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3.  
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5.  
  6. <head><title>DIVFloatSampletitle> 
  7.  
  8. <styletypestyletype="text/css">DIV{margin:3px;}.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}  
  9.  
  10. .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;}  
  11.  
  12. .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;}  
  13.  
  14. style>head> 
  15.  
  16. <body><DIVclassDIVclass="d1"> 
  17.  
  18. <DIVclassDIVclass="d2">   
  19.  
  20. DIV><DIVclassDIVclass="d3">   
  21.  
  22. DIV>DIV>body> 
  23.  
  24. html> 

以上代码显示的结果如下,很正常,结果相同。

下面会在这个基础上进行修改,修改的内容都在style中,其他代码就不再重复写了。

请注意,这里的Style中用到了min-height,这个和height是不同的,min-height指定了对象的一个最小高度,当对象的子内容高度超过这个最小高度是,这个对象会自动撑大。这是一个非常牛的style,可惜的是,在这个style和float这个同样牛的style一起使用的时候,就会出现各种问题。#p#

◆内部一个DIV修改成为float:left 

  1. .d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}  
  2.  
  3. .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}  
  4.  
  5. .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;}  

显示结果如下。

 


这个结果中,Firefox有点离谱了,两个框叠在一起也就罢了,为什么那个红框会变大捏?而且变的大小也很诡异,不知道是按照什么公式计算出来的。IE在这里的显示应当是附和标准的。

◆内部两个DIV都修改成为float:left 

  1. .d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}  
  2.  
  3. .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}  
  4.  
  5. .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;float:left;}  

显示结果如下。

 

在这种情况下,Firefox的结果尚能解释,可能是float把外层的DIV也作为内层float影响的范围,这样内层的就不会将外层的DIV撑大了。IE在这里出现了Margin失效的情况,可以解释为内层第二个float造成了影响。#p#

◆干脆把外层的DIV也修改成为float:left 

  1. .d1{width:250px;min-height:20px;border:1pxsolid#00cc00;float:left;}  
  2.  
  3. .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}  
  4.  
  5. .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;float:left;}  

显示结果如下。

 

这种情况下,Firefox正常了,而IE延续了前面的不正常情况。

◆外层是float:left,内层最后一个不再float:left 

  1. .d1{width:250px;min-height:20px;border:1pxsolid#00cc00;float:left;}  
  2.  
  3. .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}  
  4.  
  5. .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;}  

显示结果如下。

 

这和前面第一种加float:left的情况相同。#p#

结论

再重申一次,本文讨论的是一个比较高级的话题。如果在style中用height而不是min-height来设定高度,是不会出现以上这些问题的。不过,不用min-height就失去了DIV自动撑大这一个很有必要的特性。在min-height和float:left的情况下,没有一种完美的写法让Firefox和IE结果相同。不过仍然可以发现绕开的方法。进一步试验可以发现,margin遭到的影响在padding上比较好,所以最好是padding和margin都不用,或者只用padding。

两者相同的代码如下:

  1. DIV{padding:3px;}  
  2.  
  3. .d1{width:250px;min-height:20px;border:1pxsolid#00cc00;float:left;}  
  4.  
  5. .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}  
  6.  
  7. .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;float:left;}  

显示结果如下。

 

当然所有这些情况也许是有合理解释的,说不定增加某一个style的设置,这些问题都迎刃而解了,不过目前我还没有找到这个设置。

【编辑推荐】

  1. DIV+CSS中常见十大错误总结
  2. DIV定位单元中三大元素的控制
  3. 深入学习DIV+CSS之绝对定位和相对定位用法
  4. Div+CSS布局入门之写入整体层结构与CSS
  5. DIV+CSS开发过程中影响SEO的制作细节
责任编辑:佚名 来源: blabla.cn
相关推荐

2010-08-27 10:59:11

DIVTable

2010-10-08 14:39:43

IE6DIVIE7

2010-09-02 16:18:33

CSSDIVIE6

2010-08-27 10:49:38

DIVtable

2010-09-13 12:56:56

CSSpositionfloat

2010-08-24 15:45:48

DIVCSSfloat

2010-08-24 09:46:57

IE6IE7FF火狐

2010-08-18 13:45:07

IE6IE7FF

2010-08-27 15:56:52

IEFirefoxCSS

2010-08-20 13:34:12

IEFirefoxJavascript

2010-08-18 15:41:38

IE6E7Firefox

2010-08-24 15:54:52

divfloat

2010-08-19 14:43:49

IE6IE7IE8

2010-09-09 15:17:01

absoluterelativeCSS

2010-09-06 09:16:04

floatDIV

2010-08-18 14:32:07

IE6IE7IE8

2010-08-19 10:13:25

marginFFIE6

2010-08-18 16:42:47

IE6CSSDIV

2010-09-09 16:47:49

CSS paddingFirefox

2010-08-18 15:02:54

IEFirefox兼容
点赞
收藏

51CTO技术栈公众号