在这种情况下,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-height:40px; border:1px solid #cc0000; }
left的情况相同。所以最好是padding和margin都不用?
显示结果如下,
IE在这里的显示应当是附和标准的。
这和前面第一种加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; }
left的情况相同。当对象的子内容高度超过这个最小高度是。
显示结果如下,
呵呵,总算是一样了,虽然是凑合着一样了。幸好一样了,否则只好用table了。
当然所有这些情况也许是有合理解释的,说不定增加某一个style的设置,这些问题都迎刃而解了,不过目前我还没有找到这个设置。
关于Doctype
可惜的是,在这个style和float这个同样牛的style一起使用的时候。
以上代码在下面这些Doctype下试验过,结果相同。
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
““>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
““>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“-transitional.dtd”>
三、CSS完美兼容IE6/IE7/FF的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
二、万能 float 闭合
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
三、其他兼容技巧