修复iPhone的safari浏览器上submit按钮圆角bug

今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——"表单中的input type=submit和input type=reset按钮在iPhone的safari浏览器下圆角有一个bug”很是疑惑,于是搜集整理一番,下面我来简单的描述一下这个bug的样子

自从完成上次iPhone的几个页面效果后,一直在没有制作iPhone的页面效果了,今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。

    安卓

  IOS

可是上面的代码就在iPhone的Safari浏览器下出开头所陈述的问题。一下真不好如何动手解决,因为从来没有接触过,所以就一直没有碰到过。但问题出了,就要想办法解决,于是在GG上搜索“input submit for iPhone”,还真找到了问题所在。 Keir Whitaker 在Styling Submit Buttons for Mobile Safari 中介绍的内容和我碰到的问题可真是一模一样,按其方法在样式中加入:

代码如下:

.form-actions input{
...
-webkit-appearance: none;
}

更新到iPhone一看,真爽,问题解决了。

原来问题出在这里,iPhone上的safari解析input[type="submit"]和input[type="reset"]按钮会以苹果浏览器的默认UI渲染,这样就出现我刚才那种现像,我们在样式中明确的设置了button的圆角值,但到iPhone的safari上就不生效了。要想让他生效,就需要在样式中明确的指名:

那么"-webkit-appearance"对button还有什么影响呢?大家可以参考下面的截图:

上图所显示的效果,都将button设置了:

效果图明显的告诉我们,在不同的“-webkit-appearance”选值情况下,button所渲染的效果是不一样的,详细的测试代码大家可使用safari浏览器点击这里。有关于“-webkit-appearance”的详细介绍,这回算是知道了,最后我建议大家,我们可以直接在“reset.css”样式文件中加处这么一句:

代码如下:

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

这样一来就不会为这样的问题头痛了。

如果你还没有碰到,或者你也在开发移动端web,都希望你记住这个小技巧,因为当你在制作中碰到这样的问题时,不会为此抓破头皮,能解决你问题。最后希望大家喜欢这篇文章,如果你觉得对你有所帮助,可以推荐给你的朋友,或者有更好的分享可以在下面的评论中直接给我们留言。

时间: 2024-12-14 07:20:50

修复iPhone的safari浏览器上submit按钮圆角bug的相关文章

五个在Safari浏览器上的实用快捷键使用

五个在Safari浏览器上的实用快捷键使用. Command+L   前往URL地址栏,填写新的网址或进行搜索    Command+T   开启新的浏览器标签页    Command+W 关闭当前标签页    Command+R   刷新当前标签页    Command+.    停止载入当前标签页

修复iPhone上submit按钮bug

来自:http://www.w3cplus.com/node/271 原来问题出在这里,iPhone上的safari解析input[type="submit"]和input[type="reset"]按钮会以苹果浏览器的默认UI渲染,这样就出现我刚才那种现像,我们在样式中明确的设置了button的圆角值,但到iPhone的safari上就不生效了.要想让他生效,就需要在样式中明确的指名: 1 .form-actions input{ 2 ... 3 -webkit-

【学习】苹果iPhone safari浏览器样式重置修复按钮圆角bug

iPhone safari浏览器中,input按钮会按苹果的默认UI来渲染,例如,写的按钮明明是这个样的: 但是实际就会是这个样子: 怎么办呢? 为按钮添加:-webkit-appearance: none; 即可解决!

解决使用了属性overflow:scroll、overflow-y:scroll、overflow-x:scroll;的网页在iPhone iOS Safari浏览器中滑动不流畅问题

在使用了属性overflow:scroll.overflow-y:scroll.overflow-x:scroll;的元素上加上-webkit-overflow-scrolling: touch;即可 参考资料: 解决页面使用overflow: scroll在iOS上滑动卡顿的问题 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现 -webkit-overflow-scrolling 带来的 BUG

苹果safari浏览器window.open问题

现象:在做项目的过程中,使用window.open打开新窗口,在windows系统的ie,firefox,chrome浏览器上测试均没有问题,在苹果系统的safari浏览器上发现有些window.open可以打开选项卡,有些不可以打开 第一种可以打开选项卡 第二种则打不开选项卡 解决方案:百度发现"safari 中没办法在回调函数里面执行window.open, 原因是safari的安全机制将其阻挡了",解决办法就是在请求之前先打开一个空白窗口,在请求成功的回调函数里面:如果请求错误不

jQuery无刷新上传插件Uploadify的上传按钮不显示

使用的 免费的flash版本,电脑也有 flash player 的9.0.24版本以上 在浏览器上传按钮不能正常显示, 这是  因为浏览器禁止了flash , 需要开启flash , 例:使用的谷歌浏览器 未开启flash  是这个样子,需要开启flash 下面是一个方法 即可正常显示: 或者 打开 谷歌浏览器的设置 -  高级 - 内容设置- Flash - 允许网站运行Flash

去除iphone中Safari给按钮默认添加的UI样式

之前在做一个活动页面,里面用到了 input 的 button,写完样式在安卓手机上面测试没有问题,但是在iPhone的Safari中的样式完全变了. 在网上搜索了一下,原来是Safari默认添加上的样式. 而且不仅仅是button,还有submit,reset. 找到原因,赶紧解决,下面献上css代码: input[type="submit"], input[type="reset"], input[type="button"], button

Chrome浏览器点击 input file上传按钮时延迟3-5秒的解决方法

1.  Google chrome 浏览器在52版本之后出现一个bug,就是点击 input file上传按钮时反应很慢,需要等待3-5秒种之后才能弹出选择文件的对话框.比如 windows里可能是这样: MAC里可能是这样:

Safari 浏览器模拟iPhone和其他浏览器

1.打开safari浏览器中的偏好设置 2.在偏好设置中,选择高级,勾选在菜单栏中显示开发菜单 3.打开开发,进入响应式设计模式 4.可以选择iphone 或ipad.浏览器等不同模式,进行模拟 5.也可以模拟其他浏览器,window中的浏览器 选择浏览器名称下拉框可以选择使用 6.使用完之后,点击开发--退出响应式设计模式,浏览器恢复正常 原文地址:https://www.cnblogs.com/zhang-jun-jie/p/9578179.html