在PC時代前端開發(fā)者們被IE瀏覽器搞的要崩潰了，還好現(xiàn)在越來越多的需求已經(jīng)放棄了對IE6的支持，有的甚至已經(jīng)拋棄了對IE7的支持，更有甚者已經(jīng)開始擁抱IE9+了。而讓大家的蛋疼的時代依然還是沒有過去，在移動web開發(fā)中因為各式各樣的機型也是搞得開發(fā)者蛋都疼了。

比如這里我們要說的這個問題，我相信很多人都遇到過，而且也曾經(jīng)背這個問題困擾過。那就是在在安卓手機瀏覽器中使用圓角時背景顏色撐破邊框的問題（當然不是所有安卓機都會出現(xiàn)問題），我發(fā)現(xiàn)有一些比較大的項目也存在這個問題，比如Discuz默認的手機觸屏版模版中。

如上圖就是在安卓手機中出現(xiàn)的問題，就我所知在華為、小米等品牌安卓機中都存在這個問題。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版的效果。

出現(xiàn)這種情況基本滿足三個條件：使用了背景、有圓角（不設圓角顯然不出現(xiàn)這個問題）、有邊框。當然如果說最不優(yōu)雅的方式就是把邊框去掉，但我們有時候需要一個邊框；那么總不能就因為這樣在這種場景下就不使用邊框了吧。

還有一種方式就是重定義background-clip的值，大家可以用JS分別檢測這個值會發(fā)現(xiàn)不管是Chrome還是安卓的默認值都是border-box，而當我們在安卓上把這個值重定義為padding-box或者conten-box（當元素沒有padding或者padding區(qū)域不需要背景時使用這個值），就會發(fā)現(xiàn)安卓上的這個問題沒有了。

簡而言之，就是把background-clip的值自定義為padding-box。

但這里不得不說，其實這里的問題值得我們進一步思考。如果按我們的思維邏輯，就算是初始的值是border-box，邊框都已經(jīng)被圓角束縛了，為什么背景卻要跑到邊框以外去呢？這個問你大家可以進步探索。