场景:在开发微商城的时候,经常会遇到ios端和安卓端的样式显示不一样,例如同一按钮(样式一样)会显示不一样的颜色,导致项目整体的搭配不是很好
在网上搜索了一番后,发现css样式:-webkit-appearance: none,就可以去除浏览器默认样式
关于这个属性以前写过 解决iOS下无法正常渲染按钮的问题 ，问题产生的原因是，iOS下的safari中有默认的
按钮样式：
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: push-button;
white-space: pre;
}
/*【-moz代表火狐的内核，-ms代表IE内核，-webkit代表webkit内核，常见是的是谷歌和苹果浏览器】*/
其中-webkit-appearance: push-button;就是将按钮设置成iOS中默认原生控件的样式。而我们现在要消除默认原生控件的样式，通常我们可以在相应的元素上加上
-webkit-appearance : none ;
来移除原生控件样式。
遗留问题:
但是后来解决网站bug时，发现一个棘手的问题：微商城的input的checkbox和radio类型在安卓端无法正常显示,但在ios端和pc端可以正常。<input type="checkbox">的复选框选中了没有打钩，排查发现,原来是在全局css定义样式之后(如上样式)所产生的问题css中“-webkit-appearance: none;”导致的。
【解决方案】：
“-webkit-appearance: checkbox”
总结测试后发现：
-webkit-appearance:none导致无法获取checkbox值
这个BUG发生的背景有点复杂。大概就是一个Form表单，要用Validation Plugin验证，Ajax提交。结果发现在Webkit浏览器下无论怎样都阻止这个form在提交的时候刷新整个页面。
最后总算抓到元凶是checkbox上的-webkit-appearance:none属性。
-webkit-appearance会将webkit浏览器中的元素默认样式去除。checkbox在这个属性下就直接隐藏掉了。然后用JS获取checkbox值时Webkit浏览器会报很奇怪的错误。给这个元素重新赋上-webkit-appearance:checkbox就不会报错了。
其他的的表单元素以及其他的情况并未测试。这个问题在Chrome和Safari中都会出现，应该是Webkit引擎的问题。
查询资料：总结如下：
①说明:
-webkit-appearance 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支持，请慎用。
②前缀说明
webkit是一种浏览器私有前缀,是浏览器对新css实现的一个提前支持-webkit-前缀是指webkit内核的浏览器,与之相同的还有一个浏览器私有前缀-moz-,-moz-是指Firefox内核的浏览器
【-moz代表火狐的内核，-ms代表IE内核，-webkit代表webkit内核，常见是的是谷歌和苹果浏览器】
③浏览器私有属性说明
为什么要有私有前缀呢？因为制定HTML和CSS标准的组织W3C动作是很慢的。通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但是w3c不会为这个属性制定标准，而是要走很复杂的程序，经过很多审查。而浏览器商不愿意等那么久，他们觉得一个属性已经够成熟了，就会在浏览器中加入支持。但是避免日后w3c公布标准时有所变更，就会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性，等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。