iphone上safari浏览器submit按钮显示圆角bug

在苹果的iphone和ipad设备上, form表单的submit按纽会被显示成圆角, 就像是加了border-radius:20px一样,
但在电脑上就没问题, 显示如下:

百度查了查终于查到了原因, iPhone上的safari解析input[type="submit"]和input[type="reset"]按钮会以苹果浏览器的默认UI渲 染，这样就出现我刚才那种现像，我们在样式中明确的设置了button的圆角值，但到iPhone的safari上就不生效了。
解决办法其实很简单,只需要在submit按纽的css中添加如下代码就行了,

.input{-webkit-appearance: none;}

添加之后显示的按纽像是加了border-radius:4px一样,有一个小小的圆角,还是不能显示直角,如下图,但总算比圆角要好的多了,


其实在之前就遇到过这个问题,只是没当回事,用另一种方法解决了,即把submit按纽改成image或者button,
然后又看了看, 另一个页面中同样是用的submit在ipone上却不是圆角, 对了对css样式是一样的,显示却不一样,仔细对比了下,终于发现了问题,按纽不是用的input而是用的button,如下,这样就绕开了safari浏览器 input[type="submit"]的UI渲染,问题就解决了,一样可以提交

<button name="contact-button" class="btn-primary" type="submit">提交</button>