对Div处理 IE6/IE7和Firefox不同之处

sunhw0725 · 发表于 2007-10-8 14:37:53

　基本HTML代码
[code]
<!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>[code]
　　以上代码显示的结果如下，很正常，结果相同。

　　当然所有这些情况也许是有合理解释的，说不定增加某一个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造成了影响。

sunhw0725 · 发表于 2007-10-8 14:38:07

干脆把外层的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"
"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">

复制代码

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

对Div处理 IE6/IE7和Firefox不同之处

相关帖子

浏览过的版块