今天遇到了一个IE6下的兼容性问题，虽然IE6已经不被大众所期待了，用户也已基本上消失的所剩无几，但是，作为一个问题而存在，我们有必要尝试的去研究一下bug的改善方法

对元素float-left，然后再对元素设置margin-left:40px，调试时候，鬼一般的出现了双倍的margin-left,变为80px（同样如果是float-right,margin-right亦是如此）

效果如下：

　　

　　而在chrome，IE7+，均没有这个现象产生，现象如下：

　　后来，在样式中给元素添加了一个display:inline之后，就没有这个现象产生了，由于inline是使元素变成行内元素，那么什么是行内元素呢，其实就是内联元素，只是叫法不同，描述的都是一种状态，那么何为内联元素呢？就是说允许其他与之均为内联的元素都能够在同一行显示，如常见的<a>,<span>,当然，我们对其设置宽度和高度是不起作用的，除非我们再给他加入block；

　　我们的标签我们这么理解，然后当元素变为行内元素之后，会新开辟一个地方，而那个地方之前是没有元素的或者没有内联元素排在它的前面，那么这样，行内元素自然就会自动的浮动到我们父级元素的边框上，则双倍margin的现象就会消失，取而代之的是单倍margin正常显示，就这么理解。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="css/inside.css" />

</head>
<body>
<div class="content clearFix">

<div class="main margin">

</div>
<div class="main margin">

</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>

.main{
　　margin-left: 40px;
　　background-color: #a847c3;
　　width: 80px;
　　height: 80px;
　　padding: 20px 20px;
　　border: 1px solid #2C2C2C;
　　float: left;
　　display: inline;
}
.content{
　　background-color: #2143fd;
　　margin: 100px auto;
　　width: 1000px;
　　height: 120px;
}

.clearFix:after {
　　clear: both;
　　content: ".";
　　display: block;
　　height: 0;
　　visibility: hidden
}

　　当然还有一个方法，就是我们将div改成<span>标签，这样的好处就在于，<span>标签本身就是具有内联属性的内联元素，那么问题又来了，内联元素对于宽度和高度是没有效果的，但是我们加了float之后元素就会呈现出来了，要是不加就不会出现，为什么呢（由于默认本身为内联，故没有加display:inline）？现象如下:

　　加了float之后的现象：

　　后来我上了百度搜索了一下，键入“加了float”，百度奇迹般的自动弹出

　　看来这是一个大众耳熟能详的问题啊，笔者不禁为自己知识的浅陋而感慨

　　然后得出的结果如下：

　　由于对元素float之后，会使得元素自动变为block，因为几个元素之间的浮动，是需要紧挨着元素的边框，如果不是block，就不能实现浮动。然后内联元素会根据样式中设定的宽度和高度来调整自身的大小，如果样式中没有设定宽度和高度，那么就会自适应为其元素默认的宽度和高度。

　　样式如下：

　　.main{
　　　　margin-left: 40px;
　　　　background-color: #a847c3;
　　　　width: 80px;
　　　　height: 80px;
　　　　padding: 20px 20px;
　　　　border: 1px solid #2C2C2C;
　　　　/*display: block;*/
　　　　float: left;
　　　　/*display: inline;*/
　　}

IE6下margin时，float浮动产生双倍边距的更多相关文章

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

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

  2. ie6下margin双倍距的问题

    今天中午休息时, 公司客服突然报出来一个bug, 一个用ie6的用户打开我们活动网站时, 发现内容都错乱了, 我赶紧上线一看, 发现是正常的. 找了台ie6的xp机器再看了下, 重现出了这个用户的问题 ...

  3. IE6下margin出现双边距

    在IE6下,块元素有浮动和横向margin的时候,横向的margin值会被放大成两倍 解决方法:添加display:inline; eg:下面的例子在IE6下会有两倍边距 <style> ...

  4. IE6下绝对定位元素和浮动元素并列绝对定位元素消失

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

  5. IE6 margin 双倍边距解决方案

    一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度.要实 ...

  6. ie6下常见的bug 调整页面兼容性

    ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调 ...

  7. 慎用margin系列2---ie6双倍边距问题

    IE6下有一个著名的margin双倍bug 一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠 ...

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

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

  9. 解决IE6下浮动层固定定位的经典方法

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

随机推荐

  1. windows文件关联、打开方式列表之修改注册表攻略

    这里全是修改注册表的方式.网上找了半天,有的仅有添加文件关联的方法,却没有添加到打开方式列表里面的方法:有的有添加到文件列表的方法,却是使 用控制面板->文件夹选项的.好难得才找齐所有,从添加文 ...

  2. hdfs 机架感知和复制因子的设置

    dfs.replication 新更新的复制因子的参数对原来的文件不起作用. 譬如说,原来的复制因子是2,则原来文件上传的时候就只有两个副本. 现在把dfs.replication设置为3,重新启动h ...

  3. 用FineReport报表系统构建资金监管平台

    一.应用背景 计算机的应用已经渗透到日常工作的许多方面,无论是其自身还是所发挥的作用,计算机都标志着一种高科技,使工作高效率和高水平.为了能更方便,更轻松,更好的管理,信息化建设正在日益发展壮大,更加 ...

  4. IDEA使用（1）intellIJ idea 配置 svn

    以前开发工具一直用的是Eclipse/MyEclipse,虽然早就听说过Idea而且也尝试用过几次, 说实话一开始使用idea真是很不习惯,不只是快捷键不同:比如项目和模块.服务器(如Tomcat)配 ...

  5. 初步了解Entity Framework

    来源:http://www.cnblogs.com/Wayou/archive/2012/09/20/EF_CodeFirst.html Entity Framework的全称是ADO.NET Ent ...

  6. 关于电磁场中的E.B.D.H的理解

    电磁场理论中存在四个基本物理量,电场强度E,磁场强度H,电场通量密度D,磁场通量密度B. E:其中E和H最简单,电场中的电荷受到电场力的作用,单位电荷受的力称为电场强度,这种定义得到E的单位为N/C, ...

  7. 自学一个月的java了

    不知道这篇博文有不有朋友看到.先自我介绍一下,硕士一年级下学期. 对编程感兴趣,硕士一年级下学期转学计算机专业,目前刚好一个月的时间.接触计算机也是刚好一个月的时间. 学习了java,javaweb. ...

  8. pitch yaw roll 的区别

    http://blog.163.com/vipwdp@126/blog/static/150224366201281935518196/

  9. Java之反射机制

    一:基本概念:在Java运行时,对于任意一个类,能否知道这个类对应的属性和方法?对于一个对象,能否知道可以调用它的哪些方法?YES! 这种动态获取类的信息以及动态调用对象的方法的功能来自于Java语言 ...

  10. JS/PHP 浮点数精确运算

    php浮点数精确运算 bc是Binary Calculator的缩写.bc*函数的参数都是操作数加上一个可选的 [int scale],比如string bcadd(string $left_oper ...