标准CSS盒子模型和低版本IE盒子模型区别有哪些?解决IE6存在bug的方法

2020-06-1520:31:31网页制作Comments2,133 views字数 832阅读模式

标准(W3C)盒子模型:width = 内容宽度(content) + border + padding + margin文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19443.html

低版本IE盒子模型: width = 内容宽度(content + border + padding)+ margin文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19443.html

图片展示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19443.html

标准CSS盒子模型和低版本IE盒子模型区别有哪些?解决IE6存在bug的方法
标准CSS盒子模型和低版本IE盒子模型区别有哪些?解决IE6存在bug的方法

区别: 标准盒子模型盒子的heightwidthcontent(内容)的宽高,而IE盒子模型盒子的宽高则包括content+padding+border部分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19443.html

2.几种解决IE6存在的bug的方法

  • float引起的双边距的问题,使用display解决;
  • float引起的3像素问题,使用display: inline -3px;
  • 使用正确的书写顺序link visited hover active,解决超链接hover点击失效问题;
  • 对于IEz-index问题,通过给父元素增加position: relative解决;
  • 使用!important解决Min-height最小高度问题;
  • 使用iframe解决selectIE6下的覆盖问题;
  • 使用over: hidden, zoom: 0.08, line-height: 1px解决定义1px左右的容器宽度问题;

?注意:有关IE6支不支持!important的问题,对于单个类是支持的。例如:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19443.html

.content { color: pink !importent };
.content { color: orange };
// 这里IE6及以上,FF,google等都将显示粉红色
复制代码

但是,当一个样式内部有多个相同属性的时候。例如:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19443.html

.content { color: pink !importent; color: orange };
// IE7及以上,FF, google显示粉红色,而IE6将显示橙色(原因是一个样式内重复设置了属性,后面的就会覆盖掉之前

作者:hh_phoebe
链接:https://juejin.im/post/5ee0cf335188254ec9505381
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19443.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19443.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/19443.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定