安卓webview中伪元素存在边距问题

问题描述

在开发一个弹框的UI过程中,因为不想引入图片了,就用css来写这个标题框。左右两侧有一个小三角形,于是采用before和after伪元素利用border来解决。问题就是在安卓端发现这两个伪元素距离实际的位置有大概1px的距离。

左边为IOS,右边为安卓

WechatIMG6.jpeg

代码

.modal-header::before {
  display: block;
  margin: 0;
  content: '';
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-left: .07rem solid transparent;
  border-right: 0 solid transparent;
  border-bottom: .1rem solid #7CA0F3;
  position: absolute;
  left: -.07rem;
  top: 0;
}

想请教一下这个问题的原因是什么,应该如何解决

待解决 悬赏分:0 - 离问题结束还有
反对 0举报 0 收藏 0

我来回答

回答1