input type = text vertikale Ausrichtung in Firefox einreichen

Question

Ich versuche, meine Form Tasten, um Stil und ich habe ein Problem in Firefox zu erfahren, dass ich nicht auf den Boden bekommen ...

Ich mag Stil bestimmte <a /> s und <input type="submit" /> s gleich aussehen (ich einen Knopf Hintergrundbild, einen Schiebetüren Technik unter Verwendung eines Hover-Effekt anzuwenden.)

das alles funktioniert gut, außer in Firefox, die Eingabe einreichen Text ist etwas tiefer als es sein sollte. IE und Safari/Chrome funktionieren einwandfrei.

alt text http://blog.muonlab.com/wp-content/uploads/2009/11/b0rked-buttons.png

bekam Wer irgendwelche Ideen?

Dank

<div class="buttons"> 
    <a href="#" class="button btn-small-grey">&laquo Back</a> 
    <input type="submit" class="button btn-large-green" value="Save changes" /> 
</div> 

.button 
{ 
    cursor: pointer; 
    border: 0; 
    background-color: #fff; 
    color: #fff; 
    font-size: 1.4em; 
    font-weight: bold; 
    outline: 0; 
    font-family: Arial, Verdana, Sans-Serif; 
} 

a.button 
{ 
    display: block; 
    float: left; 
    text-align: center; 
    text-decoration: none; 
    padding: 5px 0 0 0; 
    height: 22px; 
    margin-right: 1em; 
} 

.btn-small-grey 
{ 
    height: 27px; 
    width: 96px; 
    background-position: 0 -81px; 
    background-image: url(/assets/images/buttons/buttons-small.gif); 
} 

.btn-large-green 
{ 
    height: 27px; 
    width: 175px; 
    background-position: 0px -54px; 
    background-image: url(/assets/images/buttons/buttons-large.gif); 
} 

Answer 1

Ich fand diesen Beitrag, weil ich dieses Problem vor ein paar Monaten gelöst hatte und als ich heute wieder hineingerannt bin, konnte ich mich nicht erinnern, was ich getan hatte. Nett. Nachdem ich über mein CSS geblickt hatte, fand ich endlich den "Fix".Ich kann Kredit nicht nehmen, weil ich es auf dem Netz irgendwo gefunden, aber hoffentlich wird es Ihnen als nützlich sein, wie es für mich war:

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

Ich hoffe, das hilft.

Answer 2

hatte ich das gleiche Problem, und ich habe gelöst (nur für FF und Safari) durch die Breite Fixierung aber nicht die Höhe und das Spiel mit den Werten: padding (oben und unten), line-height und bei Bedarf die vertikale Ausrichtung auf die Mitte ausrichten. Es ist jedoch einfacher, wenn Sie alle Werte (sogar die Schriftgröße) in Pixel festlegen.

---

EDIT: Ich denke, dass es keine Cross-Browser-Lösung ist, weil das Problem auf die Textdarstellung des Browser zurückzuführen ist. Um das Problem vollständig zu lösen, können Sie einen Hintergrund img mit Text zeichnen und dieses Bild auf den Link oder die Schaltfläche anwenden. Auch wenn Sie mit dieser Lösung an Zugänglichkeit verlieren.

Alternativ können Sie bedingte CSS-Anweisungen verwenden, um das Layout für jeden Browser zu verbessern.

Answer 3

Ich habe das gleiche Problem jedes Mal, wenn ich Form Schaltflächen stylen muss. Sorry, im Moment ziemlich beschäftigt, also nur kurze Beschreibung, wie ich es normalerweise repariere.

In FF Text ist in der Regel ein bisschen niedriger, genau wie auf dem Bild, das Sie anhängen und so dann ich einfach "Padding-unten" auf den Button selbst anwenden. Es bewegt den Text auf der Schaltfläche Anzahl der Pixel nach oben.

Das Problem ist, es bewegt sich auch Text in IE und jetzt IE sieht ein bisschen aus. Um das zu beheben, wende ich "line-height" auf denselben Button mit exakt dem gleichen Wert wie die Höhe des Buttons an. Das ignoriert den Füllvorgang vollständig und positioniert den Text genau in der Mitte. Im Folgenden finden Sie HTML-Beispielcode:

<input type="submit" value="SEARCH" class="search"/> 

und CSS:

.search 
{ 
    background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */ 
    height: 29px; 
    width: 104px; 
    border: 0; 

    /* centering text on button */ 
    line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */ 
    padding-bottom: 2px; /* IE will ignore but works for FF */ 
} 

Leider habe ich es nicht direkt an Ihrem Code angewendet, aber ich bin im Moment ein bisschen damit beschäftigt, hoffen, dass Sie auf die Idee, und es hilft aber.

ps. nur in IE8 eingecheckt und alle oben bewegt Text einige Pixel nach oben. Es bedeutet also mehr (endlos?) Herumzuspielen mit Polsterung oben/unten. Ich habe jetzt aber meine Geduld verloren und ich denke, dass ich das alles ab jetzt in ein separates Stylesheet schreiben werde, bis ich eine ziemlich einfache und universelle Lösung finde für alle diese

Answer 4

Sie könnten auch erwägen, die Schaltfläche durch ein anderes Element zu ersetzen. Das Ankerelement funktioniert perfekt. Fügen Sie dem Ereignis "onClick" einfach eine Funktion "Senden" hinzu, und Sie können loslegen. Ich denke, das ist eine bessere (und einfachere) Cross-Browser-Lösung.

Answer 5

Eingänge werden nicht nach dem W3-Box-Modell Konvention in verschiedenen Browsern formatiert, möchten Sie vielleicht umfassen:

input /*Content follows box model*/ 
{ 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 

    height:24px; 
} 

auch für Firefox enthalten (die Shelly wies darauf hin):

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

Andernfalls Sie könnten Knopf verwenden

Ich sammelte alle diese Lösungen aus verschiedenen Quellen, sie verdienen das Guthaben