input类型按钮在IOS和Android中样式兼容问题

同样适用下面代码插入一个按钮
<code><input type="submit" value="提交"></code>
在IOS和Android中的样式如下图所示


apple1.jpg
android1.jpg

经过试验发现它们有两点不同:

apple2.jpg
android2.jpg
  1. IOS有默认的渲染按钮方式(渐变和圆角)
  2. IOS中按钮高度不会随行高自动调整

要让它们显示一致,需要添加以下两个样式:
-webkit-appearance:none;
height: 4em;
它们现在的样式如下

apple3.jpg
android3.jpg

基本保持一致。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容