按钮样式,在 Android 手机浏览器中显示正常,但在 iOS Safari 浏览器中会看到按钮显示为圆角样式,设置 border-radius:0; 也不好使。
这是因为iPhone、iPad 设备上的 Safari 解析 input[type=”submit”] 和 input[type=”reset”] 按钮会以苹果浏览器的默认 UI 渲染,这样就出现了我们不需要的样式。
解决(苹果浏览器的默认 UI 渲染)的方法是在 CSS 按钮样式代码中添加一行css代码(重置按钮的样式):
1 -webkit-appearance:none;
在 CSS 代码中添加 “-webkit-appearance: none;”是告诉浏览器按钮 不 按 照 苹果浏览器的默认 UI 来渲染。
通常,在 CSS 中添加以下整合代码:
1 input[type="text"],2 input[type="submit"],3 input[type="reset"],4 input[type="button"],5 button{ outline:0; -webkit-appearance:none;}