場景:在開發微商城的時候,經常會遇到ios端和安卓端的樣式顯示不一樣,例如同一按鈕(樣式一樣)會顯示不一樣的顏色,導致項目整體的搭配不是很好.在網上搜索了一番后,發現css樣式:-webkit-appearance: none,就可以去除瀏覽器默認樣式.
ul, li, dl, dt, dd, form, h1, h2, h3, h4, p, input, form {
margin: 0px;
padding: 0px;
-webkit-appearance: none;
}
問題:
但是后來發現一個問題,微商城的input的checkbox和radio類型在安卓端無法正常顯示,但在ios端和pc端可以正常,通過排查發現,原來是在全局css定義樣式之后(如上樣式)所產生的問題
解決方案:
為input對應的類型對 -webkit-appearance 進行取值,例如:
input[type=checkbox]{
-webkit-appearance: checkbox;
}
-webkit-appearance屬性拓展(以下信息從網上摘取):
①說明:
-webkit-appearance 是一個 不規范的屬性（unsupported WebKit property），它沒有出現在 CSS 規范草案中。此屬性非標准且渲染效果在不同瀏覽器下不同，有些屬性值甚至不支持，請慎用。
②前綴說明
webkit是一種瀏覽器私有前綴,是瀏覽器對新css實現的一個提前支持-webkit-前綴是指webkit內核的瀏覽器,與之相同的還有一個瀏覽器私有前綴-moz-,-moz-是指Firefox內核的瀏覽器
③瀏覽器私有屬性說明
為什么要有私有前綴呢？因為制定HTML和CSS標准的組織W3C動作是很慢的。通常，有w3c組織成員提出一個新屬性，比如說圓角border-radius，大家都覺得好，但是w3c不會為這個屬性制定標准，而是要走很復雜的程序，經過很多審查。而瀏覽器商不願意等那么久，他們覺得一個屬性已經夠成熟了，就會在瀏覽器中加入支持。但是避免日后w3c公布標准時有所變更，就會加入一個私有前綴，比如-webkit-border-radius，通過這種方式來提前支持新屬性，等到日后w3c公布了標准，border-radius的標准寫法確立之后，再讓新版的瀏覽器支持border-radius這種寫法。