Eingang hat mysteriöse Bodenauffüllung
Ich versuche einige Formelemente ziemlich präzise zu gestalten, und dieses Thema bereitet mir viel Kummer.
Wenn ich versuche, padding , margin , border und outline von <input> (mit display: block ) zu entfernen, so dass die Größe des Feldes rein vom Text, der Eingabe, bestimmt wird Das Feld hat ein paar Pixel mehr Auffüllung als jedes andere Block-Level-Element, das genau auf die gleiche Weise formatiert ist. Hier ist ein Beispiel:
Ссылка
Rendern:
In diesem Beispiel erhält <div> eine berechnete Höhe von 16px , während <input> eine berechnete Höhe von 19px erhält.
Ich bekomme das gleiche Verhalten in Chrome 16, Firefox 9 und Opera 11, so dass es Engine unabhängig macht.
Ich kann das Problem beheben, indem ich manuell eine Höhe hinzufüge, aber das möchte ich nicht, weil ich möchte, dass das Design responsive .
Kann mir jemand helfen, zu verstehen, was hier vor sich geht, und wie ich zuverlässig sicherstellen kann, dass die <input> die gleiche Höhe wie jedes darauf folgende Blocklevelelement hat?
4 Antworten
Die <input> hat eine minimale line-height basierend auf der Schriftgröße. Wenn Sie beide Elemente auf einen größeren line-height -Wert setzen, wird auch line-height vollständig entfernt. Aber das erlaubt immer noch nicht, kleinere Höhen als das Minimum zu haben. Der Fix dafür benutzt das first-line Pseudo-Element und setzt es auf display: inline-block; .
Demo: Ссылка
CSS:
%Vor% Aber das erklärt nicht, warum <input> sich anders verhält als <div> . Sogar -webkit-appearance: none; hat das nicht behoben. Es scheint so, als gäbe es einen unsichtbaren Voodoo auf Eingaben, der seinen Inhalt als inline behandelt. inline elements haben minimum line-height basierend auf der Schriftgröße. Dies ist das Verhalten, das wir hier sehen. Deshalb korrigiert first-line es. Es scheint das "Kind" -Element von <input> zu stylen.
Hier ist eine Demo, die die minimalen line-height für inline Elemente zeigt. Das <div> -Element ehrt line-height: 7px; . Der <span> , obwohl sein berechneter Wert 7px; anzeigt, respektiert ihn nicht visuell.
Demo: Ссылка
Ausgabe:
HTML:
%Vor%CSS:
%Vor% Das Entfernen von line-height scheint das Problem zu lösen.
Siehe Geige . Getestet nur in FF tho.
Sind Sie sicher, dass sie die exakt gleiche Schriftart (einschließlich der Größe) verwenden?
Fügen Sie box-sizing: border-box zu input hinzu.
Ich hatte dieses Problem nie selbst, aber ich habe es nur als Test irgendwo im IE9 verwendet ...
Ich weiß, dass ich Monate zu spät zu dieser Frage gekommen bin, aber ich habe in einer Google-Suche darüber gesprochen und wollte eine Sache hinzufügen, die dazu beitragen könnte, einige der anderen Antworten in Bezug auf die <input> -Elemente in Firefox zu klären / p>
Der Standard-Form-Stil in Firefox enthält einige peinliche CSS:
%Vor% Dies macht es praktisch unmöglich, die line-height -Eigenschaft eines Formulars in Firefox zu überschreiben. Das Problem besteht seit Jahren, und während es für die FF-Entwickler anscheinend ein Kinderspiel ist, die !important aus der Regel zu entfernen, habe ich festgestellt, dass es einige Probleme bei der Implementierung gibt. Auch gibt es anscheinend einige Websites (einschließlich YouTube), die auf das Verhalten dieser Regel vertrauen .
Details und viele Diskussionen finden Sie unter Mozilla Bug # 349259 . Es gibt auch einen guten Blogbeitrag dazu auf 456bereastreet.com , und einen anderen (älteren) von Eric Meyer in meyerweb.com .