记:安卓上的行内元素清除浮动失效

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

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

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

CSS:

a{/*display:block;*/}/*此时a标签一定要设为块元素,不然错乱*/
.fl{float:left;}
.wrap:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}
.wrap .fl{
  width: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;

转载于:https://www.cnblogs.com/AlexBlogs/p/5378236.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值