[转载]IE6/IE7和Firefox对Div处理的差异

原文路径:http://hi.baidu.com/aohtang/blog/item/b89fb68f481c18ecf01f36e8.html

基本HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www .w3.org/TR/xhtml1/DTD/xhtml1 -transitional .dtd">

<html xmlns ="http ://www.w3.org/1999/xhtml" >

<head>

<title>Div Float Sample</title >

<style type="text/css">

div { margin:3px; }

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }

.d2 { width:130px; min-height :40px; border:1px solid #0000cc; }

.d3 { width:100px; min-height:40px; border :1px solid #cc0000; }

</style >

</head>

<body>

<div class="d1">

<div class="d2">&nbsp ;</div>

<div class="d3">&nbsp;</div>

</div>

</body>

</html>

两个框叠在一起也就罢了,为什么那个红框会变大捏。

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

其他代码就不再重复写了。显示结果如下。

div, xhtml, firefox, ie6,ie7

可以解释为内层第二个float造成了影响。

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

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

内部一个Div修改成为float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }

.d3 { width:100px; min -height:40px; border :1px solid #cc0000; }

所以最好是padding和margin都 不用.

显示结果如下。

div,float:left

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

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

.d1 { width:250px; min-height:20px ; border:1px solid #00cc00; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc ; float: left; }

.d3 { width:100px; min-height:40px; b order:1px solid #cc0000; float: left; }

显示结果如下。下面会在这个基础上进行修改,

显示结果如下 。

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

当然所有这些情况也许是有合理解释的,说不定增加某一个style的设置 。

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

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

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left ; }

.d3 { width :100px; min-height:40px; border:1px solid #cc0000; float: left ; }

显示结果如下,

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

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

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

.d1 { width:250px; min -height:20px; b order:1px solid #00cc00; float: left; }

.d2 { width:130px; min -height :40px; border:1px solid #0000cc; float : left; }

.d3 { width:100px; min-height:40px; b order :1px solid #cc0000; }

显示结果如下,显示结果如下,在min-。

显示结果如下,

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

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

结论

再重申一次 ,本文讨论的是一个比较高级的话题。如果在style中用height而不是min-height来设定高度,是不会出现以上这些问题的。不过,不用min-height就失去了div自动撑大这一个很有必要的特性。

在min-height和float :left的情况下,没有一种完美的写法让Firefox和IE结果相同。不过仍然可以发现绕开的方法。

进一步试验可以发现 ,margin遭到的影响在padding上比较好,所以最好是padding和margin都 不用,或者只用padding。

显示结果如下 ,其他代码就不再重复写了。以上代码在下面这些Doctype下试验过?

两者相同的代码如下 ,

div { padding:3px; }

.d1 { width :250px; min-height:20px ; border:1px solid #00cc00 ; float: left; }

.d2 { width:130px; min -height:40px; border:1px solid #0000cc; float: left; }

.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float : left; }

显示结果如下,

div example

呵呵,总算是一样了,虽然 是凑合着一样了。幸好一样了,否则只好用table了。

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

关于Doctype

以上代码在下面这些Doctype下试验过,结果相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 .0 Strict//EN"

"http ://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd">

posted @ 2007-08-09 16:50  不搽雪花膏  阅读(900)  评论(0编辑  收藏  举报