去掉ios下按鈕的默認樣式 -webkit-appearance

在作web移動端頁面時咱們經常會遇到這樣的狀況，設置好的按鈕樣式在安卓系統的手機下顯示出預期效果，但到了蘋果手機中倒是另外一種樣式？What's wrong?

原來是蘋果的safari下有着默認的按鈕樣式。好比，咱們設置一個按鈕：

.button{
    height: 40px;
    width: 100%;
    background: #ef4900;
    color: #fff;
    border: none;
}

<input type="button" class="button"  value="個人按鈕" />

在安卓手機下顯示是符合預期結果的:

但在蘋果手機中,倒是醬紫的~

這時在css樣式上加 -webkit-appearance : none ; 去掉蘋果手機的按鈕默認樣式，就能夠使蘋果手機下顯示也達到預期了：