去掉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 ; 去掉苹果手机的按钮默认样式，就能够使苹果手机下显示也达到预期了：