Firefox 17和CSS邊界基於三角形渲染不正確

像許多前端開發人員一樣，我一直使用邊框技巧在CSS中渲染三角形。 http://apps.eky.hk/css-triangle-generator/這臺發電機有助於這項技術。Firefox 17和CSS邊界基於三角形渲染不正確

今天，Firefox團隊在渲染引擎上發佈了一個沒有任何明確更新日誌的新版本。

現在我們可以在這些三角形周圍看到一個不合格的灰色邊框。我還沒有找到一個辦法擺脫它。編輯：它更容易看到，如果你強制像「綠色」的東西像「象棋透明」的背景

最重要的是，在Firefox 17之前，當人們抱怨如何混淆這些三角形看起來，技巧是將邊框樣式屬性設置爲「虛線」而不是實體。

在三角形發生器上使用螢火蟲，您可以快速看到它現在如何顯示。

有沒有人知道這個問題的解決辦法？

編輯：使用邊框樣式：嵌入式的建議呈現較淡的顏色在我的FF17

2012-11-29 Adeher

這個三角形在FF17中看起來很好。 – j08691

如果Firefox生成一個奇怪的灰色邊框，嘗試使用border-style：inset，如同生成器所示的那樣？因爲在這裏它看起來很好ff17 – fvu

我忘了這一點，它減輕了firefox17的顏色 – Adeher

確定這裏是最好的解決方案，我至今：

讓您的三角形的RGB值，並且使用這是一個0不透明的rgba，而不是你的三角形的相對邊界的「透明」。

保持舊的語法「透明」爲主將作爲後備工作了IE8

與像這樣結束：在答覆說

border-color: transparent transparent transparent #ffffff; 
border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #ffffff;

：邊框樣式設置爲建議的「插入」會改變FF17上的顏色。

我希望有人會找到一個更簡單的解決方案，或者這篇文章會幫助其他人。

2012-11-30 08:19:15 Adeher

Adeher的修復和其他虛線邊界修復的組合似乎可以完美解決FF23中的問題。

在長形：

border-top: 10px solid #FF0000; 
border-left: 30px dotted rgba(255, 0, 0, 0); 
border-right: 30px dotted rgba(255, 0, 0, 0);

結合Adeher的RGBA（）與虛線邊框修復（但僅在透明邊框）修復似乎呈現不難看模糊邊界一個完美的三角形。

2013-09-13 20:14:29

回答