在PC時(shí)代前端開(kāi)發(fā)者們被IE瀏覽器搞的要崩潰了，還好現(xiàn)在越來(lái)越多的需求已經(jīng)放棄了對(duì)IE6的支持，有的甚至已經(jīng)拋棄了對(duì)IE7的支持，更有甚者已經(jīng)開(kāi)始擁抱IE9+了。而讓大家的蛋疼的時(shí)代依然還是沒(méi)有過(guò)去，在移動(dòng)web開(kāi)發(fā)中因?yàn)楦魇礁鳂拥臋C(jī)型也是搞得開(kāi)發(fā)者蛋都疼了。

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

如上圖就是在安卓手機(jī)中出現(xiàn)的問(wèn)題，就我所知在華為、小米等品牌安卓機(jī)中都存在這個(gè)問(wè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)這種情況基本滿足三個(gè)條件：使用了背景、有圓角（不設(shè)圓角顯然不出現(xiàn)這個(gè)問(wèn)題）、有邊框。當(dāng)然如果說(shuō)最不優(yōu)雅的方式就是把邊框去掉，但我們有時(shí)候需要一個(gè)邊框；那么總不能就因?yàn)檫@樣在這種場(chǎng)景下就不使用邊框了吧。

還有一種方式就是重定義background-clip的值，大家可以用JS分別檢測(cè)這個(gè)值會(huì)發(fā)現(xiàn)不管是Chrome還是安卓的默認(rèn)值都是border-box，而當(dāng)我們?cè)诎沧可习堰@個(gè)值重定義為padding-box或者conten-box（當(dāng)元素沒(méi)有padding或者padding區(qū)域不需要背景時(shí)使用這個(gè)值），就會(huì)發(fā)現(xiàn)安卓上的這個(gè)問(wèn)題沒(méi)有了。

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

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