資訊專欄INFORMATION COLUMN
摘要：在為移動設備制作網頁的過程中，你可能會遇到下述奇怪的現象當你為一個按鈕設置樣式，并在瀏覽器打開模擬器查看效果時，一切都很美好。別怕，我們有兩個非常靠譜的樣式聲明可以告知瀏覽器完全拋棄控件默認的樣式，以正常的方式計算我們的樣式表。
在為移動設備制作網頁的過程中，你可能會遇到下述奇怪的現象：當你為一個按鈕設置樣式，并在瀏覽器打開模擬器查看效果時，一切都很美好。
但當你使用真機測試時，你的按鈕卻變成了下面這個樣子：
而且即使你使用終極禁術 border-radius: 0 !important 也還是沒用。
這是因為在移動設備中，各瀏覽器為一些基本控件（button，checkbox，scrollbarbutton-up）提供了一套符合原生系統界面風格的樣式，這些樣式是隱藏的，但優先級卻是最高的，高到你即使使用禁術 !important 也無法超越。
這顯然不科學。
別怕，我們有兩個非常靠譜的樣式聲明可以告知瀏覽器完全拋棄控件默認的樣式，以正常的方式計算我們的樣式表。
這兩個聲明分別是：
-moz-appearance: none：用來取消基于 Gecko 引擎的瀏覽器（如Firefox）所提供的原生系統控件樣式；
-webkit-appearance: none：用來取消基于 Webkit （如 Safari）和 Blink（如Chrome，Opera）引擎的瀏覽器所提供的原生系統控件樣式；
所以，你明白當你遇到文章開篇出現的奇怪現象應該怎么做了吧？直接兩個聲明走起啊少年！
最后，你也許會好奇，appearance 還有什么屬性值，戳這里看看MDN上怎么說吧。
PS: 戳這里，發現更多可能。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115719.html
摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。 隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...
摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。 隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...
摘要：一思考在移動端越來越重要的背景下，每位開發者對移動適配都有自己的想法。這個和移動端的設計體驗方式是比較像的。對移動端的特殊性進行適配，如問題，默認樣式等。 一、思考 在移動端越來越重要的背景下，每位web開發者對移動適配都有自己的想法。是移動優先，還是PC優先，還是兩者兼得？在實際開發中這個問題是和項目產品定位有關的，也涉及到UI的設計，不是開發者能決定。但不管產品如何定位，作為開發...
閱讀 2855·2021-10-14 09:42
閱讀 3173·2019-08-30 15:52
閱讀 3238·2019-08-30 14:02
閱讀 1101·2019-08-29 15:42
閱讀 528·2019-08-29 13:20
閱讀 1156·2019-08-29 12:24
閱讀 469·2019-08-26 10:20
閱讀 680·2019-08-23 18:31
