Rendre le bouton de forme / champ de texte même hauteur dans tous les navigateurs?

J'ai le texte suivant le css et le html (foré vers le bas pour l'essentiel. Le code complet avec des styles supplémentaires peuvent être trouvés ici: j'ai cette css, j'ai collé sur jsfiddle: http://jsfiddle.net/BwhvX/ , c'est toutefois suffisant pour reproduire le problème)

css:

* {
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    line-height: 15px;
    border: none;
}
input[type="submit"]::-moz-focus-inner {
    border: 0;
}

#search .text, #search .button {
   border: 1px solid red;
}

html:

<form method="post" id="search" action="">
    <p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>

c'est la façon dont firefox rend:

Rendre le bouton de forme /champ de texte même hauteur dans tous les navigateurs?

c'est la façon dont google chrome rend:

Rendre le bouton de forme /champ de texte même hauteur dans tous les navigateurs?

je veux les deux éléments ont la même hauteur dans tous les navigateurs. me semble que certains style par défaut est appliqué, que j'manuellement besoin de réinitialiser comme je l'ai fait pour firefox dans cet exemple.
dans chrome developer tools a une hauteur de 16 et une hauteur de 17 px mais je ne suis pas capable de voir d'où il vient, sa vient d'être calculée. les styles appliqués (qui sont indiqués pour moi) sont les mêmes.

source d'informationauteur The Surrican

  1. 17

    changement:

    *{
    line-height: normal !important;
}

    ou ajouter quelque chose comme:

    input[type="submit"], input[type="text"] {
    line-height:normal !important;
}

    ne me demandez pas pourquoi)

    et. safari a besoin spéciale de bugs. mais regarde bien

  2. 11

    J'ai trouvé ça dans normaliser.css qui a résolu pour moi:

    //Removes inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
  3. 1

    Essayer En donnant

    .text{
 border:0px;   
}
  4. 1

    Habituellement un de ces ci-dessous a travaillé pour moi dans le passé d'utiliser le navigateur firefox.

     vertical-align: bottom;
  vertical-align: top;
  5. 0

    Si vous spécifiez la hauteur au lieu de la hauteur de la ligne, ils seront correctement restituées. la hauteur se comporte bien cross-browser; hauteur de la ligne ne fonctionne pas.

  6. 0

    Eu le même problème avec firefox, réglage line-height:normal n'a pas aidé. Réglage identitcal les valeurs de remplissage sur les deux, l'entrée et l'élément de bouton, m'a beaucoup aidé.

  7. 0

    CSS3 a la box-sizing de la propriété. Le réglage de la valeur de border-boxvous dire au navigateur que l'élément border-width et le rembourrage doit être inclus dans l'élément de la hauteur, et puis peut régler facilement la hauteur de lui-même:

    input {
    box-sizing: border-box;
    height: 15px;
}

    Cela fonctionne pour du html sélectionnez éléments.