微构网络

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

2015-10-23 15:16 栏目:技术教程 查看(3,850)

在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,边框都已经被圆角束缚了,为什么背景却要跑到边框以外去呢?这个问你大家可以进步探索。

转载请注明出处:在安卓手机中使用圆角时背景颜色撑破边框解决方案 - 微构网络
分享:

您可能遇到的问题?

搜索微构网络的干货:

值班:15574303608 业务:在线咨询 技术:在线咨询

电话:0731-83862683 售后:在线咨询 邮箱:server@csweigou.com

地址:长沙市五一西路锦绣中环1116(五一广场平和堂对面)