资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/解决ios safari中按钮圆角问题

解决ios safari中按钮圆角问题

fanux / 3628人阅读

摘要：问题描述使用编写页面在移动中嵌套，总会涉及到按钮的使用，在手机浏览器中显示正常，但在浏览器中会看到按钮显示为圆角样式，设置也不好使，其实添加就能解决问题。问题截图解决上的圆角问题总结使用样式轻松解决上的圆角问题。

问题描述

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

问题截图
　　

css
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上的圆角问题。

GPU云服务器 云服务器 按钮圆角 按钮设置为圆角 html按钮样式圆角 html按钮圆角设置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111042.html

相关文章

  • 浏览器兼容问题

    摘要：一什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。条件注释最初于微软的浏览器中出现，并且直至均支持。 一、什么是浏览器兼容问题 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都...

    wenshi11019 评论0 收藏0

  • 第六天 移动端Web开发注意事项

    摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。 随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

    妤锋シ 评论0 收藏0

  • 第六天 移动端Web开发注意事项

    摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。 随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

    xbynet 评论0 收藏0

  • 移动前端知识总结

    摘要：基础知识页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对的版本以后，上已看不到效果将网站添加到主屏幕快 meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快...

    gotham 评论0 收藏0

发表评论

登陆后可评论

0条评论

fanux

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<