[CSS] Button verhält sich anders als span bei gleichen computed styles

[Krutius]

Hallo

Ich habe ein kleines Problem mit vertikaler Zentrierung. Bei einem Button dessen Höhe ich vergrössert habe, ist text innerhalb des Buttons vertikal mittig zentriert. Bei einem span mit display:inline-block nicht.

Selbst wenn ich in der button variante alle "Computed Styles" via WebKit inspector (Chrome) kopiere, und dem span zuweise, verändert sich das verhalten! Die "Computed Styles" bleiben allerdings gleich.


1) span: http://jsfiddle.net/Y2M79/
2) button: http://jsfiddle.net/Y2M79/1/

3) span, wo ich alle computed styles des buttons draufgehauen hab: http://jsfiddle.net/Y2M79/2/
4) und das ganze noch als button: http://jsfiddle.net/Y2M79/3/


Eigentlich müssten doch heutzutage sämtliche Eigenschaften eines Tags via CSS überschreibbar sein? Weiss grad jemand, warum dem so ist, und wie ich dem beikomme, ohne einen Dschungel an helper-tags zu bauen?

Demnach müssten doch zumindest die beispiele 2, 3 und 4 absolut identisch sein, da gleiche computed styles?

Mfg

Krutius

 

[Kugelfisch]

Ich kann das Problem nachvollziehen, die vertikale Zentrierung innerhalb der button-Elemente entspricht meines Erachtens nicht der gemäss CSS 2.1 erwarteten Darstellung (das Verhalten würde ich von einem Element mit display:table-cell und vertical-aligniddle erwarten). Dass sich diverse UI-Elemente (input, button, select) hinsichtlich ihrer Darstellung `seltsam` verhalten und sich die Darstellung teilweise kaum zuverlässig kontrollieren lässt, ist jedoch bekannt und leider auch in modernen Browsern aufgrund der häufig gewünschten Integration in das Betriebssystem-Look-and-Feel nicht vollständig behoben.

Um den Text innerhalb des span-Elements vertikal zu zentrieren, hast du mehrere Möglichkeiten - du könntest etwa das span-Element als table-cell, das übergeordnete Element als table darstellen lassen und die abweichende Wirkung der vertical-align-Eigenschaft für Tabellen ausnutzen, siehe https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align. Alternativ kannst du (sofern sichergestellt ist, dass es immer nur eine Zeile geben wird, was in deinem Fall wohl gegeben ist) die Zeilenhöhe deiner Elementhöhe anpassen (line-height:40px, http://jsfiddle.net/UHjsM/).