Unterschiedliche Darstellung in Fx <6 und >=6

[suit]

Zusätzliches Markup, was ich nicht wollte.
Da lieber CSS-Hacks :P

Du kannst das zusätzliche Markup auch mit CSS (::outside, ::after, ::before) einfügen, aber da werden die antiken Browser die keine runden Ecken verstehen ohnehin nicht mitmachen - oder du hilfst mit JavaScript nach.

Zudem sollte man a-Elemente nicht nur für Links verwenden? Musste da an dieses Zitat denken.

Ein notwendiges Übel, wenn du mit dem standardkonformen Verhaltensweisen nicht zufrieden bist (dämliche Browser bekommen eckige Buttons).

Die Grafik dazu muss so aussehen:

___________________________                               _
/                           |                             | \ |                           |                             | |
\___________________________|                             |_/
___________________________                               _
/xxxxxxxxxxxxxxxxxxxxxxxxxxx|                             |x\ |xxxxxxxxxxxxxxxxxxxxxxxxxxx|                             |x|
\xxxxxxxxxxxxxxxxxxxxxxxxxxx|                             |x/

Allerdings habe ich so keine variable Breite oder?

Die Grafik muss mindestens doppelt so breit (- 8 Pixel) sein, wie der breiteste Button.

Das Problem hätte ich mit :after/:before und dieser Grafik nicht:

Dafür aber das Problem mit Browsern, die das nicht können :)

Wobei bei mir der Button den Teil in der Mitte als Hintergrund hat mit repeat-x und after/before eben die beiden Enden.

Aber der line-height-Bug sucht dich heim :)

Aber du kannst dir bei meinem Code ja abschauen, wie man ihn umschifft - das Problem und die Lösung ist dieselbe.