浏览 20083 次
|
该帖已经被评为良好帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-05-16
IE6/IE7和Firefox对Div处理的差异作者：miyiyi[at]gmail[点]com
基本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"> </div> <div class="d3"> </div> </div> </body> </html> 以上代码显示的结果如下，很正常，结果相同。
下面会在这个基础上进行修改，修改的内容都在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; }
显示结果如下。
这个结果中，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; }
显示结果如下。
在这种情况下，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; }
显示结果如下，
这种情况下，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-height:40px; border:1px solid #cc0000; }
显示结果如下，
这和前面第一种加float:left的情况相同。 结论再重申一次，本文讨论的是一个比较高级的话题。如果在style中用height而不是min-height来设定高度，是不会出现以上这些问题的。不过，不用min-height就失去了div自动撑大这一个很有必要的特性。 在min-height和float:left的情况下，没有一种完美的写法让Firefox和IE结果相同。不过仍然可以发现绕开的方法。 进一步试验可以发现，margin遭到的影响在padding上比较好，所以最好是padding和margin都不用，或者只用padding。 两者相同的代码如下， 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; }
显示结果如下，
呵呵，总算是一样了，虽然是凑合着一样了。幸好一样了，否则只好用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"> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-05-17
IE6不支持min-height吧？
看来IE7加上min-height能打到IE6自动撑大的效果。以前没发现。 |
| 返回顶楼 | |
|
发表时间：2008-08-02
不错，学到了些东西，谢谢了
|
| 返回顶楼 | |
|
发表时间：2008-08-02
题目有点大，其实只是float在浏览器中的不同表现。不过文章很全面啊。
|
| 返回顶楼 | |
|
发表时间：2008-08-02
你说的不完全正确
.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; } 这段Style Firefox的处理并不是你看到的那样，因为d2 float:left，d3取代了d2的位置，而d2与d3不重叠是因为d3所在的div中的个 空字符，你去掉就重合了，d3高度的算法是(大概描述，非真实算法)：d2的高度>d3的高度?(d2的高度+内容的高度):d3的高度(自动适应内容) 对于d2,d3都float:left后ie中margin无效，firefox中外层div不会自适应大小的问题，可以通过添加辅助div解决（不用在d1中float:left，有些时候外层是不适合float的）: .clear{clear:both;margin:0;padding:0;font-size:0;line-height:0;} <div class="d1"> <div class="d2"></div> <div class="d3"></div> <div class="clear"></div> </div> 还有就是ie6与ie7对min-height的解析方式也是不同的，只有ie7支持min-height，ie6中使用height就有自动适应内容大小的作用，可以使用： min-height:20px;_height:20px; 来兼容ie6与ie7 |
| 返回顶楼 | |
|
发表时间：2008-08-04
楼主可真是不辞辛苦啊！微软该放下架子了，我的web程序，很多在firefox都可以，就是到IE6 、IE7 不可以！调试bug也相当不好！上面的这位仁兄讲的是对的！
|
| 返回顶楼 | |
|
发表时间：2008-08-04
我的项目，准备只支持ff和ie7，等以后有市场用户多了，就只支持ff，不支持IE！
|
| 返回顶楼 | |
|
发表时间：2008-08-05
我觉得文章里对float的理解有点偏差。Float的element是从正常的文档流中脱离出来的，所以这能解释当只有d2是float:left的时候FF的表现了，这个时候d2不在原来的文档流中，正如前面axers说的，d3取代了d2的位置。这里比较奇怪的是FF下d3的高度问题，突然变成了64px（FF3下的结果），不知道哪一位达人来解释一下。但是IE的表现更有问题的。
而2个都是float的时候，更好解释了，因为d2和d3都脱离了原来文档流，我觉得这个时候IE的表现是不对的。
|
| 返回顶楼 | |
|
发表时间：2008-08-05
d3包含非空字符（行内元素），由于d3和浮动元素d2等宽，该非空字符排列于浮动元素d2的下方，并保持与d2的margin值。
阅读CSS2.1 |
| 返回顶楼 | |
|
发表时间：2008-09-08
楼主没有好好阅读CSS规范，根本没有正确理解float，就乱blah blah，是很不负责任的行为。
还有，提示一下，你这里的IE中的div，由于有width属性，所以一律都hasLayout。 |
| 返回顶楼 | |
