在為移動設(shè)備制作網(wǎng)頁的過程中，你可能會遇到下述奇怪的現(xiàn)象：當(dāng)你為一個按鈕設(shè)置樣式，并在瀏覽器打開模擬器查看效果時，一切都很美好。

但當(dāng)你使用真機(jī)測試時，你的按鈕卻變成了下面這個樣子：

而且即使你使用終極禁術(shù) border-radius: 0 !important 也還是沒用。

---

---

這是因為在移動設(shè)備中，各瀏覽器為一些基本控件（button，checkbox，scrollbarbutton-up）提供了一套符合原生系統(tǒng)界面風(fēng)格的樣式，這些樣式是隱藏的，但優(yōu)先級卻是最高的，高到你即使使用禁術(shù) !important 也無法超越。

這顯然不科學(xué)。

別怕，我們有兩個非?？孔V的樣式聲明可以告知瀏覽器完全拋棄控件默認(rèn)的樣式，以正常的方式計算我們的樣式表。

這兩個聲明分別是：

• -moz-appearance: none：用來取消基于 Gecko 引擎的瀏覽器（如Firefox）所提供的原生系統(tǒng)控件樣式；
• -webkit-appearance: none：用來取消基于 Webkit （如 Safari）和 Blink（如Chrome，Opera）引擎的瀏覽器所提供的原生系統(tǒng)控件樣式；

所以，你明白當(dāng)你遇到文章開篇出現(xiàn)的奇怪現(xiàn)象應(yīng)該怎么做了吧？直接兩個聲明走起啊少年！

---

最后，你也許會好奇，appearance 還有什么屬性值，戳這里看看MDN上怎么說吧。

PS: 戳這里，發(fā)現(xiàn)更多可能。

總結(jié)

以上是生活随笔為你收集整理的如何修改移动设备按钮默认样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。