1像素问题

问题:线段看起来粗,而且有实线和虚线。华为P40PRO

问题:线段看起来粗。iPhone6 plus

正常边框

问题代码

.module3 .module3_items::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleY(50%);
  border-bottom: 1px solid #E6E7EA;
}

修正代码,border改成height

.module3 .module3_items::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleY(50%);
  height: 1PX;
  background-color: #E6E7EA;
}

问题分析:

最初以为是使用px转rem导致产生边框小数点,因此border-bottom: 1px solid #E6E7EA;改成border-bottom: 1PX solid #E6E7EA;保留px单位,但依然如旧。纯使用border的方式,猜测受到font-size,line-height影响,可以结合使用height:0;overflow:hidden处理。

发表回复

您的电子邮箱地址不会被公开。