在微信小程序开发工具中使用 iView weapp 这个UI 组件库时我们常常会用到它的 input 输入框组件,但是实际开发过程中我们会发现输入框下方的的 border-bottom 有些不可见
通过分析其 css 样式可知,它的 border-bottom 是组件内部 class 为 “i-cell i-input" 的伪元素 after 定义的。
在 css 的样式中,伪元素 after 定义了一个和父元素大小两倍缩放一半带有下边框的块,这个块绝对定位于父元素 top 为 0 的位置。如果边框没有显示出来,是不是可能在渲染的过程中因为1px像素的问题被遮盖了呢?尝试修改父元素的 class 样式中的 padding 发现一个有趣的现象。
原本的 css 样式是看不到伪元素的设置的 border-bottom
当我们将这个样式的 padding 中上下内距改成双数之后下边框就可见了
关于下边距不可见,可以通过设置伪元素绝对定位的位置,top往上提 1px 的距离,然后设置 1px 的间距,基本就不会发生下边距被遮盖的情况了
.i-cell: : after{
top: -1px;
margin-top: 1px;
}
有些实际情况是加了 margin-top 1px 的间距之后反而看不见了 border-bottom,这种情况下可以不用加这个间距,就直接设置绝对定位 top 的值为 -1px,因为这个伪元素的 pointer-events 的值设为 none 了
需要注意的是,这个不要在 app.wxss 里加,请加在所引用的组件里。