Inkonsistente Höhe der Texteingabeelemente zwischen Firefox und WebKit
OK, mir ist klar, dass dies eine Frage ist, die ewig ist, aber hier steht:
Ich habe eine einzige Texteingabe,
%Vor% und ich habe seine font-family , font-size und padding angegeben. Aber selbst auf dem gleichen Computer (mein Mac, sagen wir mal) hat die Eingabe in Firefox (3.6) eine andere Höhe als in Chrome oder Safari. Insbesondere fügt Firefox unterhalb des Textes ein wenig mehr Abstand hinzu.
Und nein, die Angabe von height in Pixeln erreicht auch keine Konsistenz.
Gibt es eine Möglichkeit, die Texthöhenkonsistenz in Gecko- und WebKit-basierten Browsern (ganz zu schweigen von IE und Opera) zu erreichen, ohne auf JavaScript zurückzugreifen? Und wenn ich JavaScript verwenden muss, hat jemand schon ein jQuery-Plugin oder so etwas entwickelt, um dies einfach zu machen?
Update: Hier ist was nicht zu tun. Das jqTransform -Plugin ermöglicht die Darstellung von Elementen und verspricht, dass sie in allen Browsern gleich aussehen . So sieht die Demo-Eingabe in Chrome 5 auf meinem Mac aus:
und so sieht die gleiche Eingabe in Firefox 3.6.4 aus:
Ich habe diese Screenshots in keiner Weise verändert, nur abgeschnitten. Jetzt ist meine erste Reaktion: "Ugh, ich möchte Firefox nicht unterstützen." Aber es gibt momentan mehr Firefox-Benutzer als Safari- und Chrome-Benutzer, also ist das keine Option.
Jemand, bitte helfen Sie! Ich möchte nur, dass meine Formulare über moderne, standardkonforme Browser gleich aussehen. Und bei "gleich aussehen", ich spreche nicht über die outline auf Auswahl oder ähnliches; Ich spreche nur über die gleiche Breite, Höhe und Textplatzierung!
3 Antworten
OK, hier ist eine "Lösung", die ich ausgearbeitet habe, wenn Sie wirklich möchten, dass <input type="text"> elements in den aktuellen Versionen von Safari, Chrome und Firefox genauso aussehen. Beachten Sie, dass ich dies nicht in Opera oder IE oder auf anderen Betriebssystemen als Mac OS getestet habe. Ich bin mir sicher, dass zusätzliche Hacks benötigt würden.
Ich definiere einfach eine <div> , um den Hintergrund für die Eingabe zu liefern, und gebe der Eingabe selbst die Eigenschaften background: none , border: 0 , etc. Mit anderen Worten, die Eingabe ist nur Fließtext. Dann positioniere ich die Eingabe über den Hintergrund, indem ich die relative Positionierung verwende (insbesondere die top der Eingabe). Das lässt mich frei, es für die verschiedenen Browser anzupassen. Insbesondere fand ich heraus, dass der Eingabetext in Webkit-basierten Browsern 1 x höher war als in Firefox, also fügte ich die Zeile
Jetzt sieht die Eingabe schließlich zwischen Webkit und Firefox genauso aus. Es ist ein Hack, ja, aber es funktioniert.
Hilft Ihnen diese andere Frage: Firefox 3.6 und CSS Unterschied zu früheren Versionen von Firefox 3.5 und zurück? ?
Siehst du also einen Unterschied zwischen fx 3.6 und Fx3.5-?