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

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

如上图就是在安卓手机中出现的问题，就我所知在华为、小米等品牌安卓机中都存在这个问题。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版的效果。

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

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

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

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