IE6下有一个著名的margin双倍bug

一、什么是双边距Bug?

先来看图:

我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:

以下为引用的内容:
.floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
 
}

很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素,被扩大到200个像素。如下图:

二、怎么会这样?

说实话,这个原因还真是不清楚。但是这个bug确实在IE6中出现了。这种情况出现的条件如下:

1.元素设置了浮动float属性

2.元素设置了margin属性

3.浮动方向和边界的方向一致

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

三、如何修正这个Bug?

很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:

CSS代码如下:

以下为引用的内容:
.floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
display: inline; 
}

慎用margin系列2---ie6双倍边距问题的更多相关文章

  1. 【IE6双倍边距】-IE6双倍边距的bug

    效果 代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; backgroun ...

  2. 解决IE6双倍边距BUG

    解决IE6双倍边距BUG,只要满足下面3个条件才会出现这个BUG: 1)要为块状元素; 2)要左侧浮动; 3)要有左外边距(margin-left); 解决这个BUG很容易,只需要在相应的块状元素的C ...

  3. 慎用margin系列3---IE6下3px bug

    当我们想让一段文字出现在一个布局块的右边的时候,我们会让布局块向左浮动,然后把段落设置左布局块宽度大小的左空白.比如左布局块是.a{float:left;height: 110px;width: 28 ...

  4. 慎用margin系列1---CSS的margin塌陷(collapse) 问题与对策

      对于以下简单代码: 如果您认为应该是这样的话: 那就错了.结果是这样的: 因为CSS中存在一个margin collapse,即边界塌陷或者说边界重叠.对于上下两个并列的div块而言,上面div的 ...

  5. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  6. 双倍浮向(双倍边距)(只有IE6出现)

    声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. 描述:在IE6中,一个居左(或居右)浮动的元素放置进一个容器盒(box),并在浮动元素上使用了左边距(或右边距) 在ie6内 ...

  7. 在IE6里面当元素浮动后再设置margin那么就会产生双倍边距

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. IE6双倍margin间距解决方案

          问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px. 解决 ...

  9. IE6 双倍距BUG

    IE6双倍距BUG的形成: 1.快元素 2.元素浮动 3.margin左右 解决方案:_display:inline;

随机推荐

  1. BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)

    原生的 Bootstrap 的 carousel.js 插件并没有支持手势,有下面3种解决方案 : 1. jQuery Mobile (http://jquerymobile.com/download ...

  2. css怎么解决表格边框线重复问题

    <ul> <li><a href="#">1</a></li> <li><a href="# ...

  3. 47-python基础-python3-字符串-常用字符串方法(五)-rjust()-ljust()-center()

    6-rjust().ljust()和 center()方法对齐文本 rjust()和 ljust()字符串方法返回调用它们的字符串的填充版本,默认通过插入空格来对齐文本. rjust()和 ljust ...

  4. c# 遍历 Mysql 所有表所有列,查找目标数据

    在 Mysql 的 information_schema 库中 COLUMNS 表中存放了所有表的所有列. using MySql.Data.MySqlClient; using System; us ...

  5. RxJava的学习与实现

    RxJava 要在Android中使用RxJava2, 先添加Gradle配置: compile 'io.reactivex.rxjava2:rxjava:2.0.1' compile 'io.rea ...

  6. linux100day(day7)--用户管理和权限管理简单介绍

    系统基础 计算机的三大部件 CPU 内存 IO 总线 一般使用system call和api来调用硬件 一些基础命令, pwd 查看当前路径 cal 计算器 clock 时钟 hwclock 显示与设 ...

  7. Redis的常用功能

    排序: sort mylist 排序 sort mylist alpha desc limit 0 2 字母排序 sort list by it:* desc by命令 sort list by it ...

  8. SQLRecoverableException: I/O Exception: Connection reset

    https://stackoverflow.com/questions/6110395/sqlrecoverableexception-i-o-exception-connection-reset T ...

  9. 离线安装.NET Framework 3.5

    通过 NetFx3.cab 文件安装 NetFx3.cab下载链接: 链接:https://pan.baidu.com/s/1OPk-G_ChSwV89VZl6TV-LA 提取码:8zel 复制这段内 ...

  10. Win7 VS2012智能提示显示英文的处理办法

    其原因为.net的语言包没安装成功, 解决方法为 替换自己英文显示的,把C:\Windows\Microsoft.NET\Framework\v2.0.50727\zh-CN 目录的文件,替换到相应的 ...