WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【01】

#兼容问题目录

1、IE6下怪异盒模型
2、IE6下最小高度问题
3、IE6下不支持1px的点线
4、IE6下内容会把父级的高度撑开
5、IE6下只支持给a标签添加伪类
6、IE67下不支持给块标签加display:inline-block
7、IE8以及IE8以前的浏览器都不支持opacity

后续兼容性问题处理链接地址：

http://blog.csdn.net/baidu_37107022/article/details/71973570

http://blog.csdn.net/baidu_37107022/article/details/71977053

---

#1、IE6下怪异盒模型
在标准模式下的盒模型，

盒子总宽度/高度=width/height+padding+border+margin

在怪异模式下的盒模型，

盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，

盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

解决办法
在css3中有一个属性box-sizing来处理是用何种模型进行解析。

box-sizing有两个值一个是content-box，另一个是border-box。

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

代码演示