Jörgs Webnotizen

Übergroße Buttons in Firefox 46

Version 46 von Firefox bringt für Linux-Nutzer eine GTK3-Integration. Dies macht sich nicht nur in dem geänderten Design der Benutzeroberfläche bemerkbar, auch nicht gestylte Formular-Elemente innerhalb von Webseiten werden mitunter anders angezeigt als vorher. Wenn Webseitenersteller mittels CSS hier keine Vorgaben machen, richtet sich das Aussehen der Formularelemente nämlich nach dem Theme des Browsers / des Betriebssystems.

Unter Linux / Xfce ist mir die Größe von nicht oder nur teilweise gestylten Buttons in Webseiten aufgefallen; dies wird insbesondere dann deutlich, wenn ein Padding aber keine Border definiert wurde, beispielsweise:


button {
padding: 3px;
}

Eine Analyse mit Firebug zeigt, dass Firefox 46 hier merkwürdigerweise eine sehr breite Border von 5px vertikal und 16px horizontal veranschlagt, obwohl der Button doch eher so ausschaut, als ob er einen zusätzlichen Innenabstand aufweist:

button-big

Definiert man nun eine Border von 1px Breite, so schrumpft der Button wieder auf Normalgröße:


button {
padding: 3px;
border: 1px solid #999;
}

button-small