头文档与怪异盒模型
在老版本IE下，不设置文档声明，页面就会陷入怪异盒模型解析
标准盒模型:
width/height = content;
可视宽/高 = content + padding + border;
怪异盒模型
width/height = 可视宽/高;
content = width - padding - border;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
padding: 50px;
border: 20px solid #000;
/* chrome 260 * 260 */
/* ie6 200 * 200 */
}
#div {
height: 100px;
background: red;
/* chrome 200 * 100 */
/* ie6 140 * 100 */
}
</style>
</head>
<body>
<div id="box">
<div id="div"></div>
</div>
</body>
</html>
在IE6下，块属性元素的高度小于19px的时候，高度会按照19px来处理.
解决办法：overflow:hidden;
在chrome下，文字大小小于12px的时候，会被当做12px来处理
解决办法: 用图片代替;
在IE6下，1px的点线会显示成虚线
解决办法: 用图片代替;
在IE6下给边框加transparent的时候，border-style最好设置成虚线(dashed)，经过实测，虚线、点线都可以
在IE6，7下，不支持给块标签加inline-block;
解决办法:
在inline-block下，添加以下代码
*display:inline;
*zoom:1;
* IE7 以及IE7以下的浏览器认识
haslayout IE渲染引擎中的一个属性,用来调节元素的渲染模式,当我们把这个属性设置为true的话，这个元素就跟根据自身的内容大小或者父级的大小，来重新计算自己的宽高.
触发hasLayout的样式：
* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* zoom: (除 normal 外任意值)
在IE6下，父级有边框的话，可能会造成子元素 的margin失效
解决办法:触发haslayout;