CSS：关于“-webkit-appearance: none”样式使用问题

场景:在开发微商城的时候,经常会遇到ios端和安卓端的样式显示不一样,例如同一按钮(样式一样)会显示不一样的颜色,导致项目整体的搭配不是很好.在网上搜索了一番后,发现css样式:-webkit-appearance:none,就可以去除浏览器默认样式. ul, li, dl, dt, dd, form, h1, h2, h3, h4, p, input, form {margin:

VanY_Y

42470人浏览 · 2015-11-18 22:21:08

VanY_Y · 2015-11-18 22:21:08 发布

场景:在开发微商城的时候,经常会遇到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这种写法。

本文链接： http://linpoint.cn/archives/13.html

转载请注明来源： Vany博客《 CSS：关于“-webkit-appearance: none”样式使用问题》