HTML5学堂-码匠 HTML5学堂

您当前位于:历史兼容问题 ——> 浏览器常见兼容问题-IE6的双倍外边距bug
上一篇:没有了 下一篇:IE浏览器兼容问题的原因-罪魁祸首haslayout

浏览器常见兼容问题-IE6的双倍外边距bug

2015/04/28 17:04:33 | 作者:HTML5学堂(码匠) | 分类:历史兼容问题 | 关键词:IE6,bug,兼容问题,双倍边距,margin

横向双倍外边距BUG — IE6盒模型

HTML5学堂:2015年,IE6已经黯然退市。不过,IE6的兼容问题,个人认为还是应当有所了解的。一方面,前端这个工作,并不能够仅仅了解现在,应当有一个较好的知识沉淀。另一方面,我们几个讲师一直将IE6作为辅助测试的工具-如果子级盒模型大小超出了父级大小,那么在IE6下必然是崩溃的。对于这种低级错误,虽然其他浏览器都能够处理和调整,但是却绝不是一个专业开发人员会犯的~

margin双倍间距bug

IE6存在不少的兼容问题,今天要说的是IE6的横向双倍外边距。

触发条件

当浮动元素的浮动方向和浮动边界的方向一致。此时用IE6查看网页,就会发现,设置的横向的边距变成了双倍。

例子:元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。

修正bug

只需要给浮动元素加上display:inline;的CSS属性就可以了。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇:没有了 下一篇:IE浏览器兼容问题的原因-罪魁祸首haslayout