CSS三角形边框使用：伪选择器渲染错误后

在Firefox和IE中，当我使用CSS边框三角形解决方案时，:after伪选择符使边框看上去磨损。对于比较看到这个图片：CSS三角形边框使用：伪选择器渲染错误后

WebKit
triangle renderings

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

来源

2012-11-30 Lukas

它是典型的但确定，查找 – Lukas

这是浏览器本身的渲染问题，而不是一个CSS问题。不，你可以改变的结果并不多。 –

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

来源

2012-11-30 14:33:14

你可以尝试改变透明的：

RGBA（255,242,0,0）

为我工作。

来源

2013-06-03 08:47:19

CSS三角形边框使用：伪选择器渲染错误后

回答

相关问题