Stellen Sie die Schaltfläche Formular/Textfeld die gleiche Höhe in allen Browsern?

Habe ich den folgenden css-und html - (Drill-down zu den essentials. Den vollständigen code, mit zusätzliche Stile können hier gefunden werden: ich habe dieses css klebte ich auf jsfiddle: http://jsfiddle.net/BwhvX/ , dies ist jedoch genug, um das problem zu reproduzieren)

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>

dies ist, wie firefox rendert:

dies ist, wie chrome rendert:

Stellen Sie die Schaltfläche Formular/Textfeld die gleiche Höhe in allen Browsern?

möchte ich die zwei Formular-Elemente haben die gleiche Höhe in allen Browsern. sieht für mich wie einige default-style angewendet wird, ist, dass ich manuell zurücksetzen müssen, wie ich für firefox in diesem Beispiel.
in den chrome-developer-tools eine hat eine Höhe von 16 und einer Höhe von 17 px, aber ich bin nicht in der Lage, um zu sehen, wo es herkommt, es ist nur berechnet. die angewandten Formatvorlagen (von mir gezeigt) sind die gleichen.

scheint, wie ich es behoben für ff und chrome durch Zugabe line-height: 16px !wichtig; zu .Taste .. aber ich kann Sie nicht verstehen. dann würde ich erwarten, dass die-Taste, um 1 px heigher

InformationsquelleAutor The Surrican | 2010-12-19

17

ändern:
```
*{
    line-height: normal !important;
}
```
oder fügen Sie etwas wie:
```
input[type="submit"], input[type="text"] {
    line-height:normal !important;
}
```
frag nicht warum)

und. safari brauchen Sie spezielle Korrekturen. sieht aber gut

danke, hab den trick
Sorry, ich muss Fragen. Warum?
+1 so eine einfache Lösung, wo andere riesige workarounds. Schön gemacht. Es stellt sich heraus, das button element erbt (berechnet in Chrom) die line-height von seinen Eltern, wo, wie input eingestellt ist normal. auf GitHub Diskutiert necolas/normalisieren.css.

InformationsquelleAutor lazycommit

Fand ich diese in normalisieren sich.css gelöst, dass es für mich:

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

InformationsquelleAutor Jethro Larson

1

Versuchen, Indem
```
.text{
 border:0px;   
}
```
gut... dann meine Grenzen gegangen sind? und der Unterschied ist immer noch da...

InformationsquelleAutor XMen
1

In der Regel eine dieser unten bei mir geklappt hat in der Vergangenheit mit firefox-browser.
```
 vertical-align: bottom;
  vertical-align: top;
```
InformationsquelleAutor Mikeys4u
0

Wenn Sie angeben, Höhe anstelle von line-height, dass Sie korrekt gerendert wird. die Höhe verhält sich auch cross-browser; line-height nicht.

InformationsquelleAutor BarthesSimpson
0

Hatte das gleiche Problem mit firefox, Einstellung line-height:normal hat auch nicht geholfen. Einstellung identitcal Polsterung Werte sowohl auf der input-und button-element half mir heraus.

InformationsquelleAutor tobart
0

CSS3 hat die box-sizing Eigenschaft. Einstellung es Wert ist, zu border-box, sagen Sie dem browser, dass das element border-width und padding in das element in der Höhe, und dann kann leicht die Höhe selbst:
```
input {
    box-sizing: border-box;
    height: 15px;
}
```
Dies funktioniert für html - wählen Sie Elemente.

InformationsquelleAutor Vasiliy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.