html标签在不同的浏览器中会展示出不同的风格样式，这也是前端程序员所遇到的最常见的兼容问题，同时不同的浏览器对于边距的设置也不尽相同。这种情况下一般会使用reset.css 进行样式重置。
在不同设备上，对于标签的样式也有不同得风格，比如iPhone上input不同类型就有与Android具有不同的样式风格。我们可以使用“appearance”属性对任何元素的渲染风格改变，最简单的来说，我要把“a”链接默认显示成“按钮”风格，那么我们可以使用“appearance”设置为“button”。
“appearance”功能听起来蛮大的，不过可惜的是，目前各个浏览器厂商各自为政，还无法达到统一的标准，至今天也只有两个内核的浏览器可以使用，其一是“webkit”，其二是“ff”的，也就是说在使用“appearances”时，需要加上各浏览器厂前缀。
需要注意的是：
-
**-webkit-appearance **是一个不规范的属性 ，它没有出现在 CSS 规范草案中
-
此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支持，请慎用。
| -webkit-appearance取值 | 代码效果 | 介绍 | Chrome | Safari | iOS Safari |
|---|---|---|---|---|---|
| none | 去除系统默认appearance的样式,常用于IOS下移除原生样式 | 支持 | 支持 | 支持 | |
| button | 渲染成button的风格 | 支持 | 支持 | 支持 | |
| button-bevel | 渲染成button-bevel的风格 | 支持 | 支持 | 不支持 | |
| caret | 渲染成caret的风格 | 支持 | 支持 | 不支持 | |
| checkbox | 渲染input:checkbox样式的复选框按钮 | 支持 | 支持 | 支持 | |
| listbox | 渲染为listbox样式的复选框按钮 | 支持 | 支持 | 支持 | |
| push-button | 渲染成push-button的风格 | 支持 | 支持 | 支持 | |
| radio | 渲染成radio的风格 | 支持 | 支持 | 支持 | |
| searchfield | 渲染成searchfield的风格 | 支持 | 支持 | 不支持 | |
| searchfield-cancel-button | 渲染成searchfield-cancel-button的风格 | 支持 | 支持 | 不支持 | |
| slider-horizontal | 渲染成slider-horizontal的风格 | 支持 | 支持 | 支持 | |
| slider-vertical | 渲染成slider-horizontal的风格 | 支持 | 支持 | 支持 | |
| sliderthumb-horizontal | 渲染成sliderthumb-horizontal的风格 | 支持 | 支持 | 支持 | |
| sliderthumb-vertical | 渲染成sliderthumb-vertical的风格 | 支持 | 支持 | 支持 | |
| square-button | 渲染成square-button的风格 | 支持 | 支持 | 支持 | |
| textarea | 渲染成textarea的风格 | 支持 | 支持 | 不支持 | |
| textfield | 渲染成textfield的风格 | 支持 | 支持 | 不支持 | |
| menulist-button | 渲染成menulist-button的风格 | 支持 | 支持 | 支持 |