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

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

margin双倍间距bug

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

触发条件

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

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

修正bug

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

欢迎沟通交流~HTML5学堂

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

UWP 手绘视频创作工具技术分享系列 - Ink & Surface Dial

本篇作为技术分享系列的第四篇,详细讲一下手绘视频中 Surface Pen 和 Surface Dial 的使用场景。  先放一张微软官方商城的图,Surfac...

28112
来自专栏腾讯社交用户体验设计

H5动效的常见制作手法 - 腾讯ISUX

3472
来自专栏菜鸟前端工程师

html+css学习笔记004-元素选择器0背景属性

915
来自专栏腾讯社交用户体验设计

经验分享:多屏复杂动画CSS技巧三则 - 腾讯ISUX

1782
来自专栏应用案例

揭开ps的神秘面纱——初步认识photoshop

在这个看脸的“世界”里 论软件的强大莫过于ps 堪称美图界“磨人的小妖精” 下面就让小编带大家伙了解一下神秘的它吧 1.什么是psPS(位图图像处理软件Phot...

1958
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

1023
来自专栏腾讯社交用户体验设计

浅议内滚动布局 - 腾讯ISUX

1083
来自专栏练小习的专栏

可视化格式模型-浮动

浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型,并不是二维的。元素在页面上的排列,从我们的角度看是...

19310
来自专栏HTML5学堂

如何清除浮动

如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

36910
来自专栏各种机器学习基础算法

关于Web语义化的意义

随着现在WEB(网页)的越来越火爆,WEB开发也越来越受人们重视。Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。...

2806

扫码关注云+社区