[HTML/CCS] Buttons browser compatibiliteit

[Vinze]

Ik ben nu al veel te lang bezig om een CSS class te maken waarmee ik submit buttons en links er exact hetzelfde uit kan laten zien, maar ik krijg het niet voor elkaar. Zoals ik het nu heb gaat het goed in Chrome en Internet Explorer, in Firefox is de link echter een pixel of 2 minder hoog..

Nu heb ik het volgende geprobeerd:
Line-height instellen: Werkt niet in FF

Height meegeven: Tekst staat niet exact in het midden

Line-height op 1em zetten: Nog steeds verschillende grote

Als ik de buttons hier op Tweakers bekijk zie ik dat het wel goed gaat, kan uit de CSS alleen niet opmaken wat de truc is.

Het voorbeeld staat hier online: http://cssdesk.com/Md2Bb



Iemand die me kan vertellen wat ik moet doen om het werkend te krijgen?

[ Voor 4% gewijzigd door Vinze op 03-04-2013 01:21 ]

[Verwijderd]

Firefox declareert in een eigen stylesheet een line-height voor de submit buttons met !important.
Om dit te omzeilen moet je !important gebruiken.

http://www.cssnewbie.com/...-height-bug/#.UT2_Rhki7Qs

[Vinze]

Die bron had ik inderdaad ook gevonden, maar zoals daar ook al staat:

And while trying to work around this rule, I discovered something that makes the situation a little more dire: browser-defined !important rules cannot be over-ruled by author-defined !important rules. This rule cannot be overruled by a CSS file, an inline style — anything.

So what’s to be done?

After a couple of hours of teeth-gnashing, I’ve settled on the following as an acceptable workaround. Instead of using line-height, use padding.

Wat daar aangeven wordt, en wat ik nu dus ook doe, is geef een padding mee.
Echter heb ik dan weer het probleem dat links en buttons net wat verschillend zijn..

Edit: Gevonden!
Ik moet het volgende regeltje toevoegen:

Cascading Stylesheet:

input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

[ Voor 8% gewijzigd door Vinze op 03-04-2013 10:40 ]

[Saven]

Volgens mij hou je dan nog het probleem dat IE het nog weer net wat anders doet, of had je dat al getest? Dat probleem heb ik ten minste altijd. Alle browsers doen iets anders met een submit button

[R4gnax]

Je kunt ook gewoon normalize.css even raadplegen. Dat project lost dit compatibiliteitsprobleem (samen met een hoop anderen) netjes voor je op.

[MrBrown]

En als je alle desktop browsers gelijk hebt, ga je verder met tablets, telefoons, internet-tv devices, etc etc etc?