怪异解析
触发浏览器：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>
在谷歌下的显示效果为：
image
在IE6下的显示效果为：
image
<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。
对于高度的计算同理，需要注意的是，也要考虑默认行高的大小。(ie浏览器有默认行高)
网友评论