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>
    

      

  • 相关阅读:
    1212. 地宫取宝
    895. 最长上升子序列
    高層タワー [MISSION LEVEL: B]
    分组背包
    多重背包
    1015. 摘花生
    1211. 蚂蚁感冒
    1205. 买不到的数目
    SQL基础教程(第2版)第4章 数据更新:4-2 数据的删除(DELETE)
    SQL基础教程(第2版)第4章 数据更新:4-1 数据的插入(INSERT)
  • 原文地址:https://www.cnblogs.com/ayseeing/p/4420550.html
Copyright © 2011-2022 走看看