横向双倍外边距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 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

如何清除浮动

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

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

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

4442
来自专栏大数据钻研

CSS中的浮动和清除浮动,梳理一下!

从业三年,项目无数,现在回过头来,想要把一些重要的知识用白话整理出来:这个东西是什么?怎样才是最佳实践?希望对自己知识体系有梳理作用, 也希望对大家有些许帮助。...

4797
来自专栏别先生

HTML+CSS提升小实战

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; ch...

5148
来自专栏搞前端的李蚊子

css实现视差滚动效果

今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/inde...

4718
来自专栏DeveWork

WebFont 三宗罪之二:吹毛求疵的WebFont 渲染差异

话说上次发了篇危言耸听的“WebFont 三宗罪”系列之一,今日来讲三宗罪之二:吹毛求疵的WebFont 渲染差异。为什么用上“吹毛求疵”这个修饰词呢?因为Je...

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

浅议内滚动布局 - 腾讯ISUX

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

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

1015
来自专栏编程

Web前端开发的四个阶段

第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

1885
来自专栏HTML5学堂

浮动元素margin-bottom失效 — IE6盒模型

HTML5学堂:虽然IE6慢慢的退出市场了,但是还是有必要了解一些兼容问题,让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'z...

3386

扫码关注云+社区