zoukankan      html  css  js  c++  java
  • inline-block在ie6中的经典bug

    众所周知,给元素设置 inline-block ,可以让ie下的元素出发layout:1。

    但是,当给元素设置 inline-block 后,在另外一个class 样式(非设置inline-block的class样式)重置为inline或者block。对于ie6下,该元素还会保留触发 layout:1;的效果。

    例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <style>
      .box a{display:inline-block;30%;background:#ccc;text-align:center;}
      .box .fl{float:left;background:red;}
      .box .fr{float:right;background:red;}
      .box .center{display:block;}
    </style>
    <div class="box">
      <a href="#" class="fl">left</a>
      <a href="#" class="fr">right</a>
      <a href="#" class="center">center</a>
    </div>
    </body>
    </html>

       在ie6下面会发现中间的模块会和左右模块之间有间距,可以看到白色背景。

    这个bug就是inline-block样式引起的,虽然后来在 .box .center 样式中重置为block,但是该模块还是保留了layout:1;的属性。

    解决办法:  

    <style>
    .box a{30%;background:#ccc;text-align:center;}
    .box .fl{float:left;display:inline-block;background:red;}
    .box .fr{float:right;display:inline-block;background:red;}
    .box .center{display:block;}
    </style>
    

      

  • 相关阅读:
    Mysql备份恢复
    Mysql事务学习笔记
    MongoDB进阶
    MongoDB入门
    Mysql流程解析
    Mysql Explain学习笔记
    面试题
    聚集索引和非聚集索引
    端口号占用
    classpath: 和classpath*:的区别
  • 原文地址:https://www.cnblogs.com/ayseeing/p/4420550.html
Copyright © 2011-2022 走看看