Uneinheitliche Höhe von Texteingabeelementen zwischen Firefox und WebKit

Question

OK, ich weiß, dass dies so etwas wie eine ewige Frage, aber hier geht:

ich eine einzelne Texteingabe habe,

<input type="text" name="whatever" /> 

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 unter dem Text ein wenig mehr Polsterung hinzu.

Und nein, Angabe height in Pixel erreicht auch keine Konsistenz.

Gibt es eine Möglichkeit, Texteingabe-Höhenkonsistenz über Gecko- und WebKit-basierte Browser (geschweige denn IE und Opera) zu erreichen, ohne auf JavaScript zurückzugreifen? Und wenn ich JavaScript verwenden muss, hat jemand bereits ein jQuery-Plugin oder etwas entwickelt, um dies einfach zu tun?

Update: Hier ist was nicht zu tun. Mit dem Plugin jqTransform können Sie Elemente formatieren und versprechen, dass sie in allen Browsern gleich aussehen. Hier ist, wie der Demo-Eingang in Chrome 5 auf meinem Mac aussieht:

und hier ist, wie der gleiche Eingang sieht in Firefox 3.6.4:

Ich habe nicht diese geändert Screenshots in irgendeiner Weise, nur abgeschnitten sie. Jetzt ist meine erste Reaktion: "Ugh, ich möchte Firefox nicht unterstützen." Aber es gibt derzeit mehr Firefox-Nutzer als Safari- und Chrome-Nutzer, also ist das keine Option.

Jemand, bitte helfen! Ich möchte nur, dass meine Formulare über moderne, standardkonforme Browser gleich aussehen! Und mit "gleich aussehen", spreche ich nicht über die outline Auswahl oder ähnliches; Ich spreche nur über die gleiche Breite, Höhe und Textplatzierung!

Answer 1

OK, hier ist eine "Lösung", die ich ausgearbeitet habe, wenn Sie wirklich wollen, dass die Elemente 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 werden.

definiere ich einfach ein <div> den Hintergrund für die Eingabe zur Verfügung zu stellen, und geben Sie die Eingabe selbst die Eigenschaften background: none, border: 0, usw. Mit anderen Worten, wird der Eingang nur Text schweben. Dann positioniere ich die Eingabe über den Hintergrund, indem ich relative Positionierung verwende (speziell die Eingabe top). Das lässt mich frei, es für die verschiedenen Browser anzupassen.Insbesondere fand ich, dass der Eingabetext war 1px höher in Webkit-basierten Browsern als in Firefox, so habe ich die Linie

if ($.browser.webkit) { $input.css('marginTop', 1); } 

nun endlich die Eingangs sieht genau das gleiche zwischen Webkit und Firefox. Es ist ein Hack, ja, aber es funktioniert.

Answer 2

Hilft Ihnen diese andere Frage: Firefox 3.6 and CSS difference from previous versions of Firefox 3.5 and back??

Sie sehen also einen Unterschied zwischen fx 3.6 und Fx3.5-?

Answer 3

if ($ .browser.webkit) {$ ("jqTransformInputInner div Eingang "). Css (" padding-top", "10px");.}