今天踩到坑了!写下一个 input type = button 的我,以为根本不可能出问题的。结果打开苹果手机打开一测,发现展示的是两个完全不同的样式。相信不少人遇到了这样的问题,今天我们来解决它。
一、问题案例
下面展示下不同操作系统的input type = button会有什么区别:
安卓手机下的效果
苹果手机下的效果
上面两张图可能排版有些不同,不用在意。
需要注意的是苹果手机自动给input type = button添加了自己的效果。
二、解决方案
我们添加几句代码来避免它,实现统一样式目的。
.item{
outline:0px;
-webkit-appearance: none;
}
苹果手机上的input按钮自带效果,需要加上outline:0px; -webkit-appearance:none; 清除原有样式。
与此同时苹果手机上的input按钮自带圆角需要按需要去掉。
网友评论