[css] view plain copy print? <span style="font-size:14px">ul, li, dl, dt, dd, form, h1, h2, h3, h4, p, input, form { margin: 0px; padding: 0px; -webkit-appearance: none; }</span>
问题:css
可是后来发现一个问题,微商城的input的checkbox和radio类型在安卓端没法正常显示,但在ios端和pc端能够正常,经过排查发现,原来是在全局css定义样式以后(如上样式)所产生的问题ios
解决方案:web
为input对应的类型对 -webkit-appearance 进行取值,例如:浏览器
[css] view plain copy print? <span style="font-size:14px">input[type=checkbox]{ -webkit-appearance: checkbox; }</span>
-webkit-appearance属性拓展(如下信息从网上摘取):app
①说明: spa
-webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出如今 CSS 规范草案中。此属性非标准且渲染效果在不一样浏览器下不一样,有些属性值甚至不支持,请慎用。code
②前缀说明orm
webkit是一种浏览器私有前缀,是浏览器对新css实现的一个提早支持-webkit-前缀是指webkit内核的浏览器,与之相同的还有一个浏览器私有前缀-moz-,-moz-是指Firefox内核的浏览器input
③浏览器私有属性说明it
为何要有私有前缀呢?由于制定HTML和CSS标准的组织W3C动做是很慢的。一般,有w3c组织成员提出一个新属性,好比说圆角border-radius,你们都以为好,可是w3c不会为这个属性制定标准,而是要走很复杂的程序,通过不少审查。而浏览器商不肯意等那么久,他们以为一个属性已经够成熟了,就会在浏览器中加入支持。可是避免往后w3c公布标准时有所变动,就会加入一个私有前缀,好比-webkit-border-radius,经过这种方式来提早支持新属性,等到往后w3c公布了标准,border-radius的标准写法确立以后,再让新版的浏览器支持border-radius这种写法。