今天遇到了一个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. Bootstrap 学习（1）

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  2. STM32学习笔记——USART串口

    转载自:http://www.cnblogs.com/microxiami/p/3752715.html 一.USART简介 通用同步异步收发器(USART)提供了一种灵活的方法与使用工业标准NRZ异 ...

  3. FTP上传与下载

    1.连接 先假设一个ftp地址 用户名 密码       FTP Server: 192.168.1.125 User: administrator Password: abc123 2. 打开win ...

  4. MMORPG大型游戏设计与开发（客户端架构 part3 of vegine）

    无论在何处在什么地方,我们都或多或少的接触到数学知识.特别是在客户端中,从打开界面的那一刻起就有太多与数学扯上的关联,如打开窗口的大小,窗口的位置,窗口里面的元件对象,以及UI的坐标等等.而在进入游戏 ...

  5. MIT 6.824 : Spring 2015 lab2 训练笔记

    源代码参见我的github:https://github.com/YaoZengzeng/MIT-6.824 Lab 2:Primary/Backup Key/Value Service Overvi ...

  6. GTAC 2015 的视频和文档已经放出

    视频见https://developers.google.com/google-test-automation-conference/2015/stream,文档见https://developers ...

  7. WinCE项目应用之虚拟仪器(VI)

    虚拟仪器技术就是利用高性能的模块化硬件,结合高效灵活的软件来完成各种测试.测量和自动化的应用.虚拟测量仪器(VI)概念由美国国家仪器公司NI(National Instruments)提出,并引发了传 ...

  8. HOLOLENS的DEVICE POTAL连接和安装

    首先进入HOLOLENS, SETTINGS -> ADVACEED SETTING (一行小蓝字)点击 里面有它的IP 然后在开发机的浏览器里输入这个IP,会显示证书有误 然后进去后要下载一个 ...

  9. [No000035]操作系统Operating System之OS Interface操作系统接口

    接口(Interface) 仍然从常识开始… 日常生活中有很多接口:电源插座:汽车油门… 那什么是接口? 连接两个东西.信号转换.屏蔽细节… Interface: electrical circuit ...

  10. poj2531 Network Saboteur

    Network Saboteur Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 11122   Accepted: 5372 ...