怪异解析 — 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(边框)时

    
    
    


    

        
HTML5学堂
        
www.h5course.com
    

在谷歌下的显示效果为：

image

在IE6下的显示效果为：

image

    
    
    


    

        
HTML5学堂
        
www.h5course.com
    

在谷歌下的显示效果为：

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

在IE6下的显示效果为：

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

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

对于高度的计算同理，需要注意的是，也要考虑默认行高的大小。(ie浏览器有默认行高)