css - CSS三 Angular 形边框使用:after伪选择器渲染错误

在Firefox和IE中，当我将CSS边框三角形解决方案与:after伪选择器一起使用时，边框看起来磨损了。参见以下图片进行比较：




这来自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;
}

最佳答案

此问题是由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;
}

关于css - CSS三 Angular 形边框使用:after伪选择器渲染错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13646607/