firefox和IE系列的相关区别整理 以备后用(4)

在这种情况下,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下试验过,结果相同。

显示结果如下,

IE6/IE7和Firefox对Div处理的差异(图四)

这种情况下,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在这里的显示应当是附和标准的。

IE6/IE7和Firefox对Div处理的差异(图五)

这和前面第一种加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的情况相同。当对象的子内容高度超过这个最小高度是。

显示结果如下,

IE6/IE7和Firefox对Div处理的差异(图六)

呵呵,总算是一样了,虽然是凑合着一样了。幸好一样了,否则只好用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” 即可,屡试不爽.

三、其他兼容技巧

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdpdsd.html