注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

iOS下无法正常渲染按钮的问题(-webkit-appearance: none;)  

2014-02-11 09:36:50|  分类: 移动客户端 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

最近做移动端的页面,碰到了一个问题,就是css无法定义按钮样式,包括input :submit,:button及button标签等,如图,左边是设计稿,右边是iOS下显示的效果;

PsQOV

stackoverflow搜索了一下,http://stackoverflow.com/questions/5438567/css-submit-button-weird-rendering-on-ipad-iphone,找到了解决方案,就是在按钮元素上加个样式:-webkit-appearance: none;

 

测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用 border-radius属性修改,例如:


CSS


1
2
3
4
5

-webkit-appearance: none;
-moz-appearance:none;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;

在“reset.css”样式文件中加处这么一句:

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

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

  评论这张
 
阅读(651)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017