CSS三角形边框使用：经过伪选择器渲染bug

Question

在Firefox和IE中，当我使用带有:after伪选择器的CSS边框三角形解决方案时，边框看起来很磨损。请参阅此图像以进行比较：

这是来自Chrome和Firefox。相关代码如下：

li.active::after {
   content: "";
   width: 0;
   height: 0;
   position: absolute;
   bottom: -8px;
   left: 40%;
   border-style: solid;
   border-width: 8px 10px 0 10px;
   border-color: #FFF200 transparent transparent transparent;
}

Answer 1

问题是由Firefox呈现具有别名的对角线的方式引起的。最简单的方法是简单地改变三角形的形状，使所有边框宽度相同，并将其向上移动以补偿尺寸差异。

li.active::after {
   content: "";
   width: 0;
   height: 0;
   position: absolute;
   bottom: -6px;
   left: 40%;
   border-style: solid;
   border-width: 10px 10px 0 10px;
   border-color: #FFF200 transparent transparent transparent;
}

Answer 2

您可以尝试使用以下方式更改透明：

RGBA（255,242,0,0）

这对我有用。