多年龙8国际官网建设经验,专业龙8国际官网设计公司龙8国际官网制作公司关于龙8国际 | 客户服务欢迎来到龙8国际官网建设公司龙8国际!
年轻,更要脱颖而出
对于网站建设,龙8国际有活力,有态度
龙8国际的优势: 专业网络公司,网站设计师量身定制 配备阿里云主机,BGP多线,高速访问 保障网站数据稳定、安全 免费提供快速ICP备案 承诺24小时快速解决网站问题

解决苹果手机ios safari浏览器中输入框有圆角、投影的问题

更新时间:2015-10-15 16:23  已阅读: 次 |  作者:龙8国际  来源:龙8国际官网建设
苹果手机ios浏览器Safari 看网页时一些输入框都会变成带圆角的显示,如果希望页面在所有浏览器上看的效果一致,可关闭这个圆角特性。
只需要给 input 或者 textarea 增加如下 CSS 即可:
-webkit-appearance: none;
border-radius: 0;


另外,使用html5编写页面在移动app中嵌套,总会涉及到按钮的使用,在android手机浏览器中显示正常,但在ios safari浏览器中会看到按钮显示为圆角样式,设置border-radius:0也不好使,其实添加css  “-webkit-appearance”就能解决问题。
 
问题截图
  

input .btn
{
display : inline-block ;
height : 30px ;
line-height : 30px ;
border : 0 ;
cursor : pointer ;
font-size : 15px ;
color : #fff ;
font-weight : bold ;
border-radius : 5px ;
padding : 0px 20px;
overflow : visible ;
-webkit-appearance : none ;/*解决iphone safari上的圆角问题*/
}

html

< input type ="button" class ="btn" />
总结:
   使用css样式-webkit-appearance: none;  轻松解决iphone safari上的圆角问题。


文章引用:/news/webzhishi/948.html
龙8国际官网建设
电话咨询
0532-80632602
186-532-19163
龙8国际官网制作
龙8国际官网建设手机站
返回顶部