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

2016-02-19 17:20 6 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享IE6/IE7和Firefox对Div处理的差异吧。

【 tulaoshi.com - Web开发 】

  基本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" headtitleDiv Float Sample/titlestyle 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/headbodydiv class="d1"div class="d2" /divdiv 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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
.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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
.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"

来源:http://www.tulaoshi.com/n/20160219/1614974.html

延伸阅读
CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。 FF浏览器 .test{     height:20px;     background-color:orange; } IE7浏览器 *+html .test{/*IE7*/     height:20px;     background-color:blue; } ...
标签: Web开发
最近重新审视了一下块集元素和内联元素,不是混淆,而是重新想了一下新的东西,有时候在我们进行重构的时候,偶尔会为了实际需要而将内联元素强制显示为块集元素,在一般情况下,这个是不会出问题的,而且可以很轻松的通过标准,但是在某一些情况下,虽然验证工具可以放过我们,但是在ie6下面会出现解析不正确的问题,下面就简单跟大家分享...
标签: Web开发
简单试用了一下IE8后,今天相对有时间点,对IE8、IE7、IE6、Firefox2.0.0.12做了简单的一些CSS HACK测试。 样式代码: p {color:#f00;} xhtml代码: p文字/p 主要是测试文字这个颜色在不同浏览器下使用hack的一些结果报告。 早上测试的东西少了几个,这里补上,还有更多的东西等怿飞的测试报告。下午有时间再看看...
标签: Web开发
中文原文: 译自: 关于浏览器的最离奇的统计结果之一就是 Internet Explorer 版本6,7和8共存。截至本文,。在网站开发社区,这个数字要小很多,统计显示。 这些统计中比较有趣的部分是,IE6、IE7、IE8之间的数值很接近,这防止了单个Microsoft的浏览器占居统治地位与过去的情况相反。根据这些令人遗憾的统计结果,在为客户开发网站...
标签: Web开发
HTML 的空白符处理规则 HTML 中的空白符包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。 我们知道,在默认情况下,HTML 源码中的空白符均被显示为空格,并且连续的多个空白符会被视为一个,或者说,连续的多个空白符会被合并。 然而在有些时候,我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现,或者需要源码...

经验教程

752

收藏

83
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部