Anhaltende Margen-und 1px Höhe Unterschied um input-Elemente

Ich habe ein problem mit input-Elemente:

Anhaltende Margen-und 1px Höhe Unterschied um input-Elemente

Obwohl in diesem Bild Ihre css ist

margin: 0;
padding: 0;

Haben Sie noch eine leichte, die Marge, die ich nicht entfernen kann. Ich hatte einen negativen margin von 4px auf die Schaltfläche in der Nähe bleiben, um das Textfeld.

Auch, wenn dabei weitere styling habe ich am Ende ein problem zwischen Firefox und Chrome:
submit-buttons scheinen nicht die gleiche Höhe haben. Einstellung der Höhe die macht der submit-button passen zusammen mit der Eingabe bar auf Chrome bricht es auf Firefox und Umgekehrt. Es scheint keine offensichtliche Lösung.

1px Unterschied zwischen den Tasten http://gabrielecirulli.com/p/20110702-170721.png

In das Bild, das Sie sehen können, wo in Chrome (rechts) die Schaltfläche und das Eingabefeld passen perfekt, im Firefox müssen Sie einen Höhenunterschied von 1px.

Gibt es eine Lösung für diese 2 Probleme (die anhaltende Marge und die 1px Unterschied)?

EDIT: habe ich behoben das erste problem, es wurde verursacht durch die Tatsache, dass die beiden Elemente getrennt durch einen Zeilenumbruch in den html-code.
Das zweite problem weiterhin besteht, obwohl, wie man hier sehen kann:
durch die Hervorhebung der Form der beiden Elemente, Sie können sehen, dass in Firefox (Links) die Schaltfläche 2px größer als in Chrom (rechts)
Anhaltende Margen-und 1px Höhe Unterschied um input-Elemente

bitte poste dein code.<br/> überprüfen Sie die schriftart,-Größe, Höhe, border-top, border-bottom css-Eigenschaften.

InformationsquelleAutor Gabriele Cirulli | 2011-07-02

  1. 8

    Versuchen, diese: demo-fiddle.

    HTML:

    <span><input type="text" /><input type="submit" /></span>

    CSS:

    span, input {
    margin: 0;
    padding: 0;
}
span {
    display: inline-block;
    border: 1px solid black;
    height: 25px;
    overflow: hidden;
}
input {
    border: none;
    height: 100%;
}
input[type="submit"] {
    border-left: 1px solid black;
}

    Getestet auf Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0 Chrome 12.0. Nur IE7 schlägt fehl, da es sich hartnäckig zeigt eine normale button-wie submit-input.

    InformationsquelleAutor NGLN

  2. 1

    Scheint mir, dass Ihre CSS stört, irgendwo, mit Ihrer Eingänge layout.

    Wie Sie hier sehen können http://jsfiddle.net/F3hfD/1/ was du fragst ist machbar ohne Probleme.

    Die 2. Ausgabe erscheint in deinem fiddle: gabrielecirulli.com/p/20110702-172143.png (Links Firefox, rechts Chrome)
    Sie können dies lösen, indem man die Einstellung "Feste Höhe". Tasten sind schwierig, denn Sie hängen nicht nur von der browser Sie auf, Sie hängen auch von der OS der browser ausgeführt wird. Überprüfen Sie die aktualisierte Geige.
    Ich versuchte das auch. Wenn Sie das tun, ist ein anderes problem entsteht, zwischen den beiden Browsern: gabrielecirulli.com/p/20110702-173514.png
    Um dies zu beheben: gabrielecirulli.com/p/20110702-173514.png (ich sehe diesen bug in Firefox), sollten Sie hinzufügen "vertical-align: top;" für input-element (und vielleicht für die Schaltfläche zu).

    InformationsquelleAutor Ben

  4. 0

    Für ein ähnliches Problem, wo ich ein Bild als button type="submit" und es war nicht genau die gleiche Höhe wie der Eingang daneben, habe ich einfach Hinzugefügt, das an den container der beiden genannten Eingänge:

    padding-bottom:1px;

    InformationsquelleAutor lxm7

  5. 0

    Hatte ich ein glyphicon in einer Zeitspanne neben der Eingabe, die das einfügen wurde top:1px.
    So ich set-top -: 0px auf den Bereich und das Problem war behoben.
    Aber die eigentliche Antwort für den thread ist ganz spezifisches problem und die Bedürfnisse der Benutzer besser zu verstehen, die Elemente und css, um es zu beheben.

    InformationsquelleAutor Ved Prakash

Schreibe einen Kommentar