今天遇到了一个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系统下进行Linux-Ubuntu14.04双系统安装笔记（二）

    在上一篇文章中介绍了新手如何安装Ubuntu14.04的双系统,本文会说明Ubuntu系统下搜狗输入法的安装,并就我遇见的一些bug给出最简单的解决办法. 第一部分.搜狗输入法的安装 本身搜狗输入法的 ...

  2. （安装linux操作系统）

    安装linux centos系统. 准备一张centos的镜像可以去官网下载. 准备VMware Workstation官网下载. 作为初学者一般都用虚拟机安装(VMwareWorkstation), ...

  3. 利用apply和arguments复用方法

    首先,有个单例对象,它上面挂了很多静态工具方法.其中有一个是each,用来遍历数组或对象. var nativeForEach = [].forEach var nativeMap = [].map ...

  4. mysql 错误 1221 Incorrect usage of union and order by

    今天有个项目出现了问题 问题原因是union和order by 的问题.关于这个问题的解决方案可以猛击下面的链接. http://blog.csdn.net/gtuu0123/article/deta ...

  5. Network Experiment Environment Construction

    In order to provide an environment for network experiments in the future, I use VirutalBox to create ...

  6. JAVA IO 以及 NIO 理解

    由于Netty,了解了一些异步IO的知识,JAVA里面NIO就是原来的IO的一个补充,本文主要记录下在JAVA中IO的底层实现原理,以及对Zerocopy技术介绍. IO,其实意味着:数据不停地搬入搬 ...

  7. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  8. HDU 2117 取(2堆)石子游戏【wzf博弈】

    题意:威佐夫博弈原型,除了输出先手能不能胜,还要输出先手的第一手选择. 思路:预处理出1000000以内的所有奇异局势.对于每个自然数,其必然是某一个奇异局势的a或者b.故对于一个非奇异局势,必定有一 ...

  9. tiny6410在I2c用户态中的程序设计eeprom

    在读写的过程中,发现写数据成功但是读取数据却失败,猜测是因为iic的读写操作过快,故在写操作后给一定的延迟,进而读写成功. 代码如下: #include <stdio.h>#include ...

  10. [No000031]操作系统 Operating Systems 之Open the OS!

    从打开电源开始… 这神秘的黑色背后发生着什么?… 打开电源,计算机执行的第一句指令什么? 计算模型(图灵机) ⇒ 我们要 关注 指针IP 及其 指向的内容 看看x86 PC (1) 刚开机时CPU 处 ...