IE6下的双边距bug

在IE6下如果一个块元素被添加浮动属性，它的横向margin值会变成在标准浏览器下的两倍

如果有多个块，只会影响首尾

正常的情况jsbin

同样的代码放在IE6下

很明显，margin-left:30px变成了60px

造成这种现象必须满足三个条件：

  1. 块元素
  2. 浮动
  3. 有横向margin

解决办法只要破坏掉任一条件即可

  1. display:inline（让块元素变成内联元素）
  2. 不要使用浮动
  3. 用padding-left代替margin-left
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,861评论 1赞 92
  • CSS
    一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css...
    KunMitnic阅读 999评论 0赞 1
  • HTML+CSS基础（CSS篇下）
    CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,322评论 0赞 3
  • 任务11-inline-block、BFC、边距合并
    1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例 概念：在CSS当...
    饥人谷_任磊阅读 730评论 0赞 3
  • 任务十一~inline-block、BFC、边距合并
    一、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例 在CSS当中，相...
    dengpan阅读 619评论 0赞 0