css - パディングに関する疑似要素のFirefoxの問題

Question

http://jsfiddle.net/e5tsL/を参照してください。chrome
ではボタンが本来のようにレンダリングされますが、FireFox でのみ ::before と ::after がパディングのために少し右にレンダリングされます。

これを修正する方法はありますか？

Answer 1

私の知る限り、FIrefox のバグが見つかりました。実際のノード構造が疑似要素でない場合は、実際のノード構造を (できるだけ近い形で) 再作成したため、これはバグだと言います。ここで、 Firefox のマジカル パディング バグについて知る必要があるかもしれませんが、これを修正しましたが、それでも、異なる結果が得られます。

http://jsfiddle.net/Dba8h/7/

このフィドルには、Chrome、Safari、Opera では同じように見える 2 つのボタンがありますが、Firefox では壊れています。

One solution is to serve up a stylesheet just for Firefox (some how, might require jQuery), with this rules:

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

That will shift it back over and align the inner elements. Of course, if Mozilla ever fixes the bug, they will suddenly be shifted the wrong way.

Alternatively, you may just want to find some other way to recreate the effect, without using a complex mixture of pseudo-nodes, positioning, etc. (For example, you can get a very similar effect [minus the curve] by using CSS3 Gradients. This would be far less taxing on the browser, and be 99% the same to most end users.)

Update: Here's an example using just gradients: http://jsfiddle.net/cXHCH/1/

It's almost the same to the naked eye (excluding the active state), and it's a lot less complicated to maintain. Gradients selected using Ultimate CSS Gradient Generator