僞元素填充的Firefox元素問題

請參閱http://jsfiddle.net/e5tsL/
在鉻按鈕呈現，因爲它應該，只有在FireFox它:: ::之前和::之後由於填充渲染了一點。僞元素填充的Firefox元素問題

有沒有辦法解決這個問題？

我在bugzilla中創建了一個bug：https://bugzilla.mozilla.org/show_bug.cgi?id=681596 –

我最終使用了一個錨而不是一個按鈕，並使用JavaScript來模仿該功能。 –

這是一個額外減少的測試用例，我將添加到Mozilla的bug跟蹤器中：http://jsfiddle.net/chriscoyier/e5tsL/8/ –

據我所知，你已經找到了一個FIrefox錯誤。我說這是一個錯誤，因爲如果它們不是僞元素，我會重新創建（儘可能接近）實際的節點結構。現在，你可能需要了解的Firefox magical padding bug，我糾正，但即便如此，我仍然得到不同的結果：

那提琴有在Chrome，Safari和Opera看起來完全相同的兩個按鈕，但在Firefox中破解。

一種解決方案是爲一個樣式表只適用於Firefox（一些如何，可能需要jQuery的），這個規則：

button::before, button::after { left: -12px; }

這將在後面轉移，並對齊內部元件。當然，如果Mozilla修復了這個bug，他們會突然被錯誤地轉移。

或者，您可能只是想找到一些其他方式來重新創建效果，而不使用僞節點，定位等的複雜混合（例如，您可以獲得非常相似的效果[減去曲線]通過使用CSS3漸變這將是對瀏覽器的稅收遠遠不足，而99％的同大多數最終用戶）

更新：這裏只用梯度的例子：http://jsfiddle.net/cXHCH/1/

這幾乎是與肉眼相同（不包括有效的狀態），並且維護起來要簡單得多。使用Ultimate CSS Gradient Generator選擇的漸變

2011-08-24 08:39:40 OverZealous

回答