css - ：after疑似セレクターレンダリングバグを使用したCSS三角形の境界線

Question

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;
}

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)

それは私のために働いた。