标准CSS盒子模型和低版本IE盒子模型区别有哪些?解决IE6存在bug的方法
标准(W3C)盒子模型:width
= 内容宽度(content) + border + padding + margin
低版本IE盒子模型: width
= 内容宽度(content + border + padding)+ margin
图片展示:

区别: 标准盒子模型盒子的height
和width
是content
(内容)的宽高,而IE盒子模型盒子的宽高则包括content+padding+border
部分。
2.几种解决IE6存在的bug的方法
- 由
float
引起的双边距的问题,使用display
解决; - 由
float
引起的3像素问题,使用display: inline -3px
; - 使用正确的书写顺序
link visited hover active
,解决超链接hover
点击失效问题; - 对于
IE
的z-index
问题,通过给父元素增加position: relative
解决; - 使用
!important
解决Min-height
最小高度问题; - 使用
iframe
解决select
在IE6
下的覆盖问题; - 使用
over: hidden
,zoom: 0.08
,line-height: 1px
解决定义1px左右的容器宽度问题;
?注意:有关IE6
支不支持!important
的问题,对于单个类是支持的。例如:
.content { color: pink !importent };
.content { color: orange };
// 这里IE6及以上,FF,google等都将显示粉红色
复制代码
但是,当一个样式内部有多个相同属性的时候。例如:
.content { color: pink !importent; color: orange };
// IE7及以上,FF, google显示粉红色,而IE6将显示橙色(原因是一个样式内重复设置了属性,后面的就会覆盖掉之前
作者:hh_phoebe
链接:https://juejin.im/post/5ee0cf335188254ec9505381
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
THE END