IE和Firefox对Div处理的差异.docVIP

IE6/IE7和Firefox对Div处理的差异 基本HTML代码 !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“/TR/xhtml1/DTD/xhtml1-transitional.dtd”  html xmlns ”/1999/xhtml” Div Float Sample  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; div class ”d1″  div class ”d2″ div class ”d3″ 以上代码显示的结果如下，很正常，结果相同。 当然所有这些情况也许是有合理解释的，说不定增加某一个style的设置。 下面会在这个基础上进行修改，修改的内容都在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; 显示结果如下。 显示结果如下，显示结果如下！ 显示结果如下。: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; border:1px solid #cc0000; float: left; 这和前面第一种加float:left的情况相同。 显示结果如下。 在这种情况下，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; 以上代码在下面这些Doctype下试验过，结果相同。 显示结果如下， 这种情况下，Firefox正常了，而IE延续了前面的不正常情况。 外层是float:left，内层最后一个不再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-h