蓝狮注册切图网用户体验团队QUX浅谈网页按钮在苹果safari浏览器下呈渐变圆角解决方案

切图网用户体验团队QUX在手机移动触屏web前端开发中碰到一个问题 — 纯css3定义的按钮在android安卓系统下显示正常,但是在苹果ios系统下,以ipad为例,蓝狮注册ipad下呈现渐变和圆角状态 。 而css3中根本没有定义这些样式,那么问题来了,这个样式从哪里来?追溯到这个源头,问题就可以迎刃而解。于是翻阅大量文档资料。终于查到:

原来iPhone上的safari解析input[type=”submit”]和input[type=”reset”]按钮会以苹果浏览器的默认UI渲染,苹果一直非常注重用户体验,从苹果系统为中文单独定义了汉字的字体就可以看出来,所以苹果浏览器对网页元素进行渲染和美化不足为其,只是考虑到是为客户做项目,如果不能保证在各种设备上显示一致的话,是不能被客户所认可的。蓝狮官网所以这里需要停止苹果默认对UI渲染。通过这个代码可以完美解决:

input[type=”submit”], input[type=”reset”], input[type=”button”], button { -webkit-appearance: none; /去掉苹果的默认UI来渲染按钮/}

把这行代码放到你的重写css部分中去,可以去掉苹果的渲染,从而实现网页在android,ios系统下显示一致。

切图网长期招募web前端开发技术牛人,有兴趣者可以主动投来简历:no-reply@p2h.cn

标签:QUX, Safari, 切图网, 用户体验

0 Comments
Leave a Reply