IE6/IE7和Firefox对Div处理的差异
2016-07-07 16:03 来源:www.chinab4c.com 作者:ecshop专家
基本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"> </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://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"> |
回答:
LZ牛人 |
支持······ |
我用京东的模板,出现错位,你能帮我看看啊 903481626急啊 |
确实有用! |
我一直不喜欢你这个分类设计。搞得框框很难看。。 |
确实有用! |
分析的很有条理,在调整兼容的时候总有那么一丝丝悲悯,只要多调试,多换个思路,多请教,多熬一下(这个最重要),总会解决的。 |
果然很强大!!!! |
不错,学习了 |
最近更新
常用插件
- ecshop虚拟发货插件
ecshop虚拟发货插件介绍: ecshop虚拟发货插件,主要为了通过后台手动录...
- ecshop订单聚合插件
ecshop订单聚合插件,主要是为了方便ecshop中订单产品到货情况的分析和...
- ecshop没登陆情况下订单查
ecshop没登陆情况下订单查询插件,主要是针对ecshop在没有登陆的情况下...
- ecshop注册审核插件
ecshop插件介绍:ecshop会员注册审核插件,主要是在前台提供给注册的时候...
- ecshop的oss插件
ecshop的oss插件免费共享了,oss,ecshoposs...
ecshop热门问答
ecshop热门资料
ecshop提款
ecshop命名
ecshop全部品牌
ecshop属性说明填写项
ecshop首页调用订单查询
ecshop美容化妆品
ecshop前辈
ecshop淑女匠
ecshop报表下载
ecshop诚聘
ecshopechsop二次开发
ecshop申請
ecshop礼品安全套
ecshop分享插件
ecshopsite
ecshop顶用
ecshop文章模块
ecshop断续
ecshop终身
ecshopdis
ecshoppxtgy
ecshop网页抽奖程序
ecshop心得体会
ecshop去掉版权
ecshop安装后不能登陆
ecshopvalues
ecshop272
ecshop访问者
ecshopsddfdf
ecshopMemcache