HTML5学堂-码匠 HTML5学堂

您当前位于:项目兼容问题 ——> 浏览器常见兼容问题-IE6盒模型怪异解析

浏览器常见兼容问题-IE6盒模型怪异解析

2015/05/27 14:16:24 | 作者:HTML5学堂(码匠) | 分类:项目兼容问题 | 关键词:怪异解析,盒模型,IE6,文档声明

怪异解析 — IE6盒模型

HTML5学堂:怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。在IE6下,盒模型存在着一种怪异解析模式。接下来我们就一起来看看怪异解析的知识吧。

怪异解析

触发浏览器:IE6

触发条件:未进行文档声明。

BUG效果:盒模型的大小计算方法发生变化。

区分宽高与盒模型大小

所谓宽高,通常指的是我们的内容区域大小,包括width以及height。而盒模型大小指的是外边距、内边距、边框以及内容区的和。换句话说,是由margin、padding、border、width和height组成的。

不同模式下的盒模型大小

在正常解析模式下,盒模型的宽度 = width + margin(左右) + padding(左右) + border(左右)

在怪异解析模式下,盒模型的宽度 = width + margin(左右) 。(即width已经包含了padding和border值)

正常模式下,解析方法毋庸置疑,但是怪异解析,上面的这种说法还是不足够严谨的,为何这么说呢?可能也会有人跟我一样的想法,如果padding值以及border值的和大于了width值,那么在怪异解析下会是什么效果呢?

耳听为虚,眼见为实,一起看一下实例吧~

width(宽度) > padding(内边距) + border(边框)时

  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>H5course</title>
  5.     <style>
  6.         html, body, div {
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  10.         .wrap {
  11.             width: 400px;
  12.             height: 300px;
  13.             margin: 50px;
  14.             padding: 50px;
  15.             border: 50px solid #f00;
  16.             background: #39f;
  17.             font-family: "Microsoft YaHei";
  18.             font-size: 24px;
  19.             text-align: center;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="wrap">
  25.         <p>HTML5学堂</p>
  26.         <p>www.h5course.com</p>
  27.     </div>
  28. </body>
  29. </html>

在谷歌下的显示效果为:

正常浏览器盒模型解析样式

在IE6下的显示效果为:

IE6浏览器盒模型怪异解析样式

欢迎沟通交流~HTML5学堂

width(宽度) < padding(内边距) + border(边框)时

  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>H5course</title>
  5.     <style>
  6.         html, body, div {
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  10.         .wrap {
  11.             width: 100px;
  12.             height: 300px;
  13.             margin: 50px;
  14.             padding: 50px;
  15.             border: 50px solid #f00;
  16.             background: #39f;
  17.             font-family: "Microsoft YaHei";
  18.             font-size: 24px;
  19.             text-align: center;
  20.         }
  21.         .wrap p {
  22.             word-break: break-all;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="wrap">
  28.         <p>HTML5学堂</p>
  29.         <p>www.h5course.com</p>
  30.     </div>
  31. </body>
  32. </html>

在谷歌下的显示效果为:

谷歌浏览器盒模型解析样式-宽度小于内边距与边框和

在IE6下的显示效果为:

IE6 怪异解析 宽度小于内边距与边框的和

看完demo之后,我们可以得出一个基本结论,在IE6下,会以盒模型的宽度 = margin + width或者padding+border(两者取其大者)。如果盒模型当中存在内容,也会留有最小的内容区域。换句话说,上面的这个demo中,在IE6下,盒模型的大小为:margin:100px + 226px。

对于高度的计算同理,需要注意的是,也要考虑默认行高的大小。

规避方法

怪异解析的规避方式非常简单:正常设置文档声明即可~

最后的最后

想说一句话,学习技术,应当多实践多总结,得到的一些结论,有时未必是正确的,有时可能是正确的,但并不是完善的。实践出真知,基于实践,总结出理论,才是学习技术的王道。等待着别人告知答案,有可能得不到真实的知识,也会失去学习知识的乐趣~

结束~~~

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端