今天遇到了一个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. 利用Python实现从百度下载图片到本地磁盘

    import urllib.request import os import re url=r'http://image.baidu.com/search/index?tn=baiduimage&am ...

  2. hdu1026.Ignatius and the Princess I(bfs + 优先队列)

    Ignatius and the Princess I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  3. 纠结和郁闷的存在感-关于DirectX与HLSL的矩阵存储方式---转载好文章

    我常常这么大胆的认为,搞科学的人总是喜欢用各种让常人难以理解的复杂方式去处理某些其实可能很简单的事情,这种情况在他自身擅长的.有着诸多对手竞争的领域上极为常见.比如吧,搞DirectX的人用了左手坐标 ...

  4. WiEngine+Eclipse+CDT+Sequoyah实现c++编程智能感知提示

    经过一段时间的摸索,我初步肯定自己基于WiEngine平台和C++开发跨Android/iPhone游戏的最佳(至少目前)环境为: Eclipse+CDT+Sequoyah 第一,JAVA代码调试技术 ...

  5. DevExpress中GridControl自定义汇总列值(有选择性的汇总)

    今天碰到有同事遇到这个方面的需求,贴一下吧. private void gvTop_CustomSummaryCalculate(object sender, CustomSummaryEventAr ...

  6. H5分享功能

    web端分享功能 https://www.cnblogs.com/sdcs/p/8328367.html H5分享功能 公司里面做web开发经常会做H5页面,今天整理分享一下. 微信公众号平台 步骤一 ...

  7. 【oracle】生成AWR报告

    [第一步]找到awrrpt.sql文件 [ora11g@vm-kvm11820-app ~]$ locate awrrpt.sql /DATA/opt/app/ora11g/product//rdbm ...

  8. 关于苹果手机微信端 position: fixed定位top导航栏问题

    在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!do ...

  9. Cordova结合Vue学习Camera

    简单聊两句 学习Vue+Cordova打包编译App,首先你要安装Cordova与vue,在这里本人就不说明了,自行看文档与搜索相关资料. Cordova中文官网地址 Vue中文官网地址 第一步:首先 ...

  10. C#获取起始位置以及添加全局资源字典

    获取起始位置 Path.Combine(AppDomain.CurrentDomain.BaseDirectory); 添加全局资源 string temp = "this is a str ...