zoukankan      html  css  js  c++  java
  • 记:安卓上的行内元素清除浮动失效

    首先说明一下,我所使用的清除浮动的方法如下:

    .clearfix:after{content:"020";display:block;height:0;clear:both;visibility:hidden;}

    .clearfix{*zoom:1;}
    这个我就不多讲了;直接上代码说问题

    CSS:

    a{/*display:block;*/}/*此时a标签一定要设为块元素,不然错乱*/
    .fl{float:left;}
    .wrap:after{content:"020";display:block;height:0;clear:both;visibility:hidden;}
    .wrap .fl{
      100px;
      height:50px;
      border:1px solid #000;
    }

    HTML:

    <div class="wrap">
      <span class="fl">1</span>
      <span class="fl">2</span>
    </div>
    <span class="wrap">
      <span class="fl">1</span>
      <span class="fl">2</span>
    </span>
    一些文字
    <span class="wrap">
      <div class="fl">1</div>
      <div class="fl">2</div>
    </span>
    一些文字

    OK,那么看到这些东西,脑子里浮现的应该是这种形式

    没错,PC浏览器好好的,IOS浏览器好好的,BUTTTTTT!

    安卓浏览器是酱紫的

    试验证明,如果外围用a 或者 span 包裹的话,就是这个鸟样,这两个的共同点就是,都是行内元素,所以解决办法就是

    加上display:block;

  • 相关阅读:
    如何制定一周工作计划
    如何评估工作offer(1)
    Iraq shoethrower inspires Web games
    数据加密技术
    数字签名技术原理
    [转载]CSS使用技巧大全
    数字签名介绍
    数字签名原理剖析
    6个有用的MySQL语句
    PGP概述及原理
  • 原文地址:https://www.cnblogs.com/AlexBlogs/p/5378236.html
Copyright © 2011-2022 走看看