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三角形邊框使用：僞選擇器渲染錯誤後

回答

相關問題