浏览器常见兼容问题-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(边框)时

<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<style>
html, body, div {
margin: 0;
padding: 0;
}
.wrap {
width: 400px;
height: 300px;
margin: 50px;
padding: 50px;
border: 50px solid #f00;
background: #39f;
font-family: "Microsoft YaHei";
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<p>HTML5学堂</p>
<p>www.h5course.com</p>
</div>
</body>
</html>

在谷歌下的显示效果为：

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

在IE6下的显示效果为：

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

欢迎沟通交流~HTML5学堂

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

<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<style>
html, body, div {
margin: 0;
padding: 0;
}
.wrap {
width: 100px;
height: 300px;
margin: 50px;
padding: 50px;
border: 50px solid #f00;
background: #39f;
font-family: "Microsoft YaHei";
font-size: 24px;
text-align: center;
}
.wrap p {
word-break: break-all;
}
</style>
</head>
<body>
<div class="wrap">
<p>HTML5学堂</p>
<p>www.h5course.com</p>
</div>
</body>
</html>

在谷歌下的显示效果为：

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

在IE6下的显示效果为：

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

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

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