上海宝山 兼职网站建设
网站首页 >> IE6/IE7和Firefox对Div处理的差异
IE6/IE7和Firefox对Div处理的差异
发布于：2007-10-28 已被阅读： 次 来源：上海宝山兼职网站建设
基本HTML代码<!DOCTYPE html PUBLIC "-兼职网站建设W3C兼职网站建设DTD XHTML 1.0 Transitional兼职网站建设EN" "http:兼职网站建设兼职网站制作.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:兼职网站建设兼职网站制作.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中，其他代码就不再重复写了。请注意，这里的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造成了影响。干脆把外层的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:兼职网站建设兼职网站制作.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-兼职网站建设W3C兼职网站建设DTD HTML 4.01 Transitional兼职网站建设EN""http:兼职网站建设兼职网站制作.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-兼职网站建设W3C兼职网站建设DTD XHTML 1.0 Strict兼职网站建设EN""http:兼职网站建设兼职网站制作.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-兼职网站建设W3C兼职网站建设DTD XHTML 1.0 Transitional兼职网站建设EN""http:兼职网站建设兼职网站制作.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
兼职网站建设相关信息
为什么要建设网站
企业为何需要做网站，企业做网站的目的是为什么，有的企业网站做了但一点效果也没有，那是因为企业没有让网站发挥作用..联系方式
电话：021-137.64934678
传真：021-137-6493-4678
Q Q: 370925000
msn:shjiajiao@tom.com
兼职网站建设
英文兼职网站建设与中文网站
日文兼职网站建设-日文兼职网站设计
走好电子商务网站的建设
八大要领 做网站就这么简单
电子商务十忌与建设网站
优秀兼职网站制作的五大要素
网站功能设计的适用性评价
高级技巧：个性化兼职网站设计
行业网站的设计心得
从网页到网络平台 网站开
网站文化与网页设计
一个成功的兼职网站设计
兼职网站建设项目合同撰写注意
企业如何准备兼职网站建设资料
兼职网站建设需要策划吗?
网络营销市场回顾与展望
企业兼职网站建设有哪些不足
网站优化
网站推广时几点禁忌 上海
兼职网站设计应注意的25条
网站策划方案写作、演示
网站推广技巧--实战中文
兼职网站开发策划所需要的文档
企业网站推广效果分析
如何做好兼职网站开发项目的
企业网站的推广漫谈 上海
最佳适合于网站海外推广
网站策划，需要什么的人才
网站策划与建设阶段网站推
网络营销中网站个性化设计