ios 设备 默认Safari 浏览器载入系统默认样式

在开发移动设备Html5页面时,有没有遇到过,你设置的样式,在ios 设备里面面目全非了.

尤其是和安卓设备对比后,会让你有种不相信css 的感觉.

其实在 ios设备中使用 Safari 浏览器时.

你页面里面的 input ,button ,submit ,reset 等元素都会被载入系统默认的css 来控制.

那么问题来了,如果默认禁止浏览器载入这些默认样式呢?

在你的css 样式中引入如下:

input[type="submit"],  
input[type="reset"],  
input[type="button"],  
button {  
-webkit-appearance: none;  
}

使用上面的定义,可以改变webkit 内核浏览器的默认样式.

为什么这个问题在移动端特别常见

因为 iOS Safari 对表单控件有一层非常强的系统默认样式。按钮、输入框在没有显式重置时，看起来往往会带着系统自己的圆角、阴影和高亮效果。这样一来，同样一套 CSS，在安卓和 iOS 上就容易长得不像一回事。

更稳妥的理解方式

可以把 -webkit-appearance: none; 理解成“先把系统帮你加的那层外观拿掉”，之后你再按自己的设计去重新定义边框、背景、圆角和点击态。也就是说，这一步不是最终样式，而是为了把浏览器差异先拉回一个更可控的起点。