在安卓手机中使用圆角时背景颜色撑破边框解决方案

2015-10-23 15:16 栏目:技术开发 查看(6351)

湖南幸运赛车爱彩人彩票网 www.schu9.cn 在PC时代前端开发者们被IE浏览器搞的要崩溃了,还好现在越来越多的需求已经放弃了对IE6的支持,有的甚至已经抛弃了对IE7的支持,更有甚者已经开始拥抱IE9+了。而让大家的蛋疼的时代依然还是没有过去,在移动web开发中因为各式各样的机型也是搞得开发者蛋都疼了。

比如这里我们要说的这个问题,我相信很多人都遇到过,而且也曾经背这个问题困扰过。那就是在在安卓手机浏览器中使用圆角时背景颜色撑破边框的问题(当然不是所有安卓机都会出现问题),我发现有一些比较大的项目也存在这个问题,比如Discuz默认的手机触屏版模版中。

ewr

如上图就是在安卓手机中出现的问题,就我所知在华为、小米等品牌安卓机中都存在这个问题。DEMO代码如下:

CSS代码

div {
padding: 20%;
text-align: center;
}

a {
display: block;
height: 40px;
border: 1px #eee solid;
background: red;
color: #fff;
line-height: 40px;
border-radius: 10px;
text-decoration: none;
}

HTML代码

?<div id='d'>
    <a href="#" id='a'>background-clip</a>
</div>

而这在Chrome等PC浏览器是正常的,比如下面就是在Chrome PC版的效果。

dsfd

出现这种情况基本满足三个条件:使用了背景、有圆角(不设圆角显然不出现这个问题)、有边框。当然如果说最不优雅的方式就是把边框去掉,但我们有时候需要一个边框;那么总不能就因为这样在这种场景下就不使用边框了吧。

还有一种方式就是重定义background-clip的值,大家可以用JS分别检测这个值会发现不管是Chrome还是安卓的默认值都是border-box,而当我们在安卓上把这个值重定义为padding-box或者conten-box(当元素没有padding或者padding区域不需要背景时使用这个值),就会发现安卓上的这个问题没有了。

简而言之,就是把background-clip的值自定义为padding-box。

但这里不得不说,其实这里的问题值得我们进一步思考。如果按我们的思维逻辑,就算是初始的值是border-box,边框都已经被圆角束缚了,为什么背景却要跑到边框以外去呢?这个问你大家可以进步探索。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:在安卓手机中使用圆角时背景颜色撑破边框解决方案 - 微构网络
分享:
  • 中央直属机关工委主要职责 2019-05-22
  • 打造“互联网+”,共享经济改变百姓生活 2019-04-22
  • 破财免灾!C罗愿向西班牙税务部门缴纳1880万欧元 2019-04-19
  • 中国品牌SUV新标杆 人民网试驾WEY VV7VV5 2019-04-19
  • 杨爱国:借助小博会促进尚志社会经济加快发展 2019-04-15
  • 泪目!川农院士逝世5年,夫人每日都去看他的雕像…思念如马,不停蹄! 2019-04-15
  • 海信世界杯首秀出奇招 竟打出俄文广告 2019-03-25
  • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-03-11
  • 我和《人民日报》(我与人民日报·纪念人民日报创刊70周年) 2019-03-11
  • 杭州再增100个海绵城市项目 2018-11-08
  • 新华网申领新闻记者证资格审核公示 2018-11-08
  • 560| 576| 702| 493| 484| 997| 385| 514| 463| 310|