今天遇到了一个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;*/
  }

随机推荐

  1. Linux运维之基础拾遗

    第一部分 Linux常用文件管理命令 1.1 cp 文件复制 常用选项 -i # 覆盖之前提醒用户确认 -f # 强制覆盖目标文件 -r # 递归复制目录 -d # 复制符号链接本身而非其指向的源文件 ...

  2. Rhel6-keepalived+lvs配置文档

    系统环境: rhel6 x86_64 iptables and selinux disabled 主机: 192.168.122.119 server19.example.com 192.168.12 ...

  3. ORA-01017 invalid username/password;logon denied&quot; (密码丢失解决方案)

    1.先确认是否输错 用户名和密码 2.如果的确是丢失密码的话: 查看sqlnet.ora 如果是 SQLNET.AUTHENTICATION_SERVICES= (NONE) , 需更改为SQLNET ...

  4. 海量数据处理算法—Bloom Filter

    海量数据处理算法—Bloom Filter 1. Bloom-Filter算法简介 Bloom-Filter,即布隆过滤器,1970年由Bloom中提出.它可以用于检索一个元素是否在一个集合中. Bl ...

  5. c++类的构造函数详解

    c++类的构造函数详解 一. 构造函数是干什么的 class Counter{ public:         // 类Counter的构造函数         // 特点:以类名作为函数名,无返回类 ...

  6. Codeforces 777C Alyona and Spreadsheet

    C. Alyona and Spreadsheet time limit per test:1 second memory limit per test:256 megabytes input:sta ...

  7. mysql学习一 常用语句

    操作系统为windows  1 启动关闭mysql服务 //windows mysqld --console //开启mysql服务 mysqladmin -uroot shutdown //关闭my ...

  8. QList 列表指针的 释放

    1,使用qDeleteAll() QList<T*> list: qDeleteAll(list): list = NULL; QList<T*> *listp: qDelet ...

  9. [BZOJ3583]杰杰的女性朋友(矩阵快速幂)

    杰杰的女性朋友 时间限制:10s      空间限制:256MB 题目描述 杰杰是魔法界的一名传奇人物.他对魔法具有深刻的洞察力,惊人的领悟力,以及令人叹为观止的创造力.自从他从事魔法竞赛以来,短短几 ...

  10. mysql 共享空间转为独立表空间

    由于以前的mysql配置为共享表空间,服务器空间不足,清理日志表里的数据后,数据库并没缩小,照成空间浪费,现在修改为独立表空间 #独立表空间innodb_file_per_table=1 #停止事物日 ...