1、0.5px边框或者0.5px高度在安卓手机下不显示问题
.item-gap {
position: relative;
&:after {
content: '';
position: absolute;
200%;
height: 1px;
background: #eeeeee;
top: 0;
left: 0;
transform-origin: 0 0;
transform: scale(0.5, 0.5);
box-sizing: border-box;
z-index: 1;
}
}
2、display:inline-block不仅左右会有无法测量的间距,上下也会有,会影响文字
3、直接在图片外面加1px的浅颜色边框时,视觉上图片和边框之间会有一条白线
把一个带边框的透明层放到图片上,这样当时是一个有留白的图片时候是可以看到边框的,当是一个填充色图片时几乎就看不到边框了
// html
<div class="bug-logo">
<div class="bug-logo-border"></div>
<img class="buy-logo-img" :src="detailData.logoUrl" alt="">
</div>
// css
.bug-logo {
position: relative;
3.75rem;
height: 3.75rem;
border-radius: 0.1rem;
overflow: hidden;
.buy-logo-img {
100%;
height: 100%;
vertical-align: bottom;
}
.bug-logo-border {
position: absolute;
100%;
height: 100%;
border: 1px solid rgba(0,0,0,0.10);
border-radius: 0.1rem;
}
}
4、svg 当使用use方式引入时,不要在symbol标签上加width,height属性,因为此时如果再配合viewBox属性使用变会使这个属性在一些机器上如vivo失效
5、从input切换到一个从下面出现的浮层时,为了避免浮层被键盘顶上去,让浮层延时500毫秒后弹出
6、当页面上需要填写的信息过多是,下面的input呼出键盘时在安卓手机上会被键盘挡住并且不可滚动
解决方案:让这个页面可滚动,并且在input的click事件上延时500毫秒后让这个元素滚动到可视区域。
注意:只能在click事件上不能在focus事件上,因为用户点击键盘上的收起键盘并不是让input失焦,延时是为了等键盘弹出后再计算可视空间的大小
7、setInterval 在手机端应用收到后台时会停止计时