今天遇到了一个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. android MotionEvent 获取长按压时间长

    思路: 1.记录ACTION_DOWN的aX, aY坐标: 2.在ACTION_MOVE判断是否移动,移动则取消记录时间,没移动就记录: 3.记录时间,按下坐标,移动坐标分别显示在TextView a ...

  2. 【JAVA 小结】Java关于类与对象的代码

    分别建立2个类class works 和 Person import java.io.*; public class works { public static void main(String[] ...

  3. hadoop日常运维与升级总结

    日常运维 升级 问题处理方法 日常运维 进程管理 由于配置文件的更改,需要重启生效, 或者是进程自己因某种致命原因终止, 或者发现进程工作出现异常等情况下,需要进行手动进程的关闭或启动, 或者是增删节 ...

  4. 免费股票数据API接口

    免费股票数据API接口提供沪深.香港.美国股市信息. 1.沪深股市 2.香港股市 3.美国股市 4.香港股市列表 5.美国股市列表 6.深圳股市列表 7.沪股列表 API文档:https://www. ...

  5. Learning Spark: Lightning-Fast Big Data Analysis 中文翻译

    Learning Spark: Lightning-Fast Big Data Analysis 中文翻译行为纯属个人对于Spark的兴趣,仅供学习. 如果我的翻译行为侵犯您的版权,请您告知,我将停止 ...

  6. monkey学习笔记

    Monkey一. Monkey 是什么?Monkey是Android中的一个命令行工具,它其实就是SDK中附带的一个工具,可以运行在模拟器里或实际设备中. 二.Monkey 测试的目的?Monkey测 ...

  7. POJ 1584 A Round Peg in a Ground Hole --判定点在形内形外形上

    题意: 给一个圆和一个多边形,多边形点可能按顺时针给出,也可能按逆时针给出,先判断多边形是否为凸包,再判断圆是否在凸包内. 解法: 先判是否为凸包,沿着i=0~n,先得出初始方向dir,dir=1为逆 ...

  8. AC日记——整理药名 openjudge 1.7 15

    15:整理药名 总时间限制:  1000ms 内存限制:  65536kB 描述 医生在书写药品名的时候经常不注意大小写,格式比较混乱.现要求你写一个程序将医生书写混乱的药品名整理成统一规范的格式,即 ...

  9. RecyclerView,CardView导入和使用（Demo）

    简介: 这篇文章是ANDROID L——Material Design详解(UI控件)的一个补充或者说是应用实例,如果有时间建议大家稍微浏览一下上篇文章. 本文主要介绍Android L新增加的两个U ...

  10. 我心目中的Asp.net核心对象

    转:http://www.cnblogs.com/fish-li/archive/2011/08/21/2148640.html 阅读目录 开始 HttpRuntime HttpServerUtili ...