当前位置:首页 > 网站设计 > 正文内容

【转】IE6/IE7和Firefox对Div处理的差异

李云召13年前 (2010-05-08)网站设计533

基本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>

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

下面会在这个基础上进行修改,修改的内容都在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">

声明:本文由云召博客收集发布,如有侵权,请联系我们,我们将第一时间进行处理。

本文链接:http://www.liyunzhao.com/post/32.html

分享给朋友:

“【转】IE6/IE7和Firefox对Div处理的差异” 的相关文章

透明背景的天气代码

透明背景的天气代码

今天云召在博客上加了一个天气的代码 ,是根据ip地址的变更进行变化, 但一般这种代码都是白色背景,和网站的模版不搭配,不好看。为了实现透明,也稍费了精力,特发出来,有需要的就拿去用。 [CODE][/CODE] 这段代码的长宽可以自定义。...

HTML5 标准规范终于最终制定完成,并已公开发布

HTML5 标准规范终于最终制定完成,并已公开发布

万维网联盟(W3C)今天泪流满面地宣布,经过几乎 8 年的艰辛努力HTML5标准规范终于最终制定完成了,并已公开发布。在此之前的几年时间里,已经有很多开发者陆续使用了 HTML5 的部分技术,Firefox、Google Chrome、Opera、Safari 4+、Internet Explore...

多个搜索引擎合并到一个搜索窗体的js代码

多个搜索引擎合并到一个搜索窗体的js代码

在很多时候,需要在搜索窗体内实现多个搜索窗体的调用,如下面的搜索窗体,结合了百度、淘宝、必应,没有加CSS,可根据需求增加CSS尝试下。:百度淘宝必应同时也将代码记录到博客上,方便后期使用,亲测有效。<div class="search clearfix"...

评论列表

老实人
13年前 (2010-05-12)

对我来说很是难办~

空灵调调
13年前 (2010-05-11)

很好的东西 解决CSS兼容性 一直是设计师头疼的事 谢谢分享~~~~

召哥 回复:
是啊,你说ie出这么多版本干嘛,并且还不兼容,是吧~
13年前 (2010-05-11)

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。