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


Posted in HTML / CSS onDecember 24, 2012

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

初载入页面后,表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子:

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

奇怪的是你点击以后就会正常:

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

对比一下,你也会觉得怪,怪都算了,还不知道如何下手:

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

或许很多同学会认为我的样式代码没写好,那么想让大家知道是怎么一回事,先来看看我写的代码:

input[type="submit"]和input[type="reset"]样式代码:

复制代码
代码如下:

.form-actions input{
width: 30%;
cursor: pointer;
background: rgb(61, 157, 179);
padding: 8px 5px;
font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
color: #fff;
font-size: 24px;
margin: 5px;
border: 1px solid rgb(28, 108, 122);
margin-bottom: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
0px 0px 0px 3px rgb(254, 254, 254),
0px 5px 3px 3px rgb(210, 210, 210);
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.form-actions input:hover{
background: rgb(74, 179, 198);
}
.form-actions input:active,
.form-actions input:focus{
background: rgb(40, 137, 154);
position: relative;
top: 1px;
border: 1px solid rgb(12, 76, 87);
box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}

这样的代码在浏览器中浏览是完全没有问题的:

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

注:请使用safari测试上面代码

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

复制代码
代码如下:

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

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

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

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

复制代码
代码如下:

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

告诉浏览器我们不希望按钮按苹果的默认UI来渲染。

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

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

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

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

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

复制代码
代码如下:

.button {
border-radius: 0;
}

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

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

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

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

HTML / CSS 相关文章推荐
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 #HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 #HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 #HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 #HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 #HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 #HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 #HTML / CSS
You might like
再说下636单管机
2021/03/02 无线电
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python类的用法实例浅析
2015/05/27 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Django框架模板的使用方法示例
2019/05/25 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
女方婚礼新郎答谢词
2014/01/11 职场文书
公司活动邀请函
2014/01/24 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
长城导游词400字
2015/01/30 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书