问题1-在项目中经常会设置border-bottom: 1px solid #e5e5e5;虽然这样可以达到效果,但是在手机上看并不是1px的高度,可能是2px或者3px
解决方法如下:使用伪类after
.part1Box {
/*border-bottom: 1px solid #e5e5e5;*/
position: relative; // 不可省略
}
.part1Box::after{
content: '';
position: absolute;
bottom:0;
left:0;
width:100%;
height:1px;
background: #e5e5e5;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
问题2-设置placeholder的字体大小和颜色
解决方法如下:
.cardNumInput::-webkit-input-placeholder{
font-size: 16px;
color: #cacaca;
}