Höhe des Twitter-Bootstrap-Textfelds zu klein?

69

Ich benutze Bootstrap und finde, dass die Höhe des Textfeldes zu klein ist. Es ist weniger als 10px. Ich frage mich, ob es klein ist oder ich einige Fehler gemacht habe.

Ich habe Firebug verwendet, um den Textbereich zu inspizieren. Es heißt, die Höhe beträgt 18 Pixel, was mir unmöglich erscheint ... Und was ich habe, ist das gleiche wie von hier. Textbereich aus dem Bootstrap-Beispiel. Es macht mich ziemlich verwirrt ... was ich habe, ist

input, textarea, select, .uneditable-input {
  border: 1px solid #CCCCCC;
  border-radius: 3px 3px 3px 3px;
  color: #555555;
  display: inline-block;
  font-size: 13px;
  height: 18px;
  line-height: 18px;
  margin-bottom: 9px;
  padding: 4px;
}

Die Höhe sagt, es ist 18px, aber es ist nicht ... Kann jemand helfen?!

css twitter-bootstrap Gnijuohz
quelle
1
OK. Ich finde das hilfreich. Aber ich würde mich freuen, wenn mir jemand dies erklären kann. Es scheint ziemlich seltsam, dass die CSS-Eigenschaften exakt gleich sind, aber das Ergebnis so unterschiedlich ist ... Was der! DOCTYPE-Teil mit CSS zu tun hat ?!
Gnijuohz
Der DOCTYPE bestimmt, wie nachsichtig ein Browser beim Rendern einer Seite ist. Unter quirksmode.org/css/quirksmode.html finden Sie einige Beispiele.
Rodney Folz
Ich habe das gelesen, aber ich kann nicht herausfinden, welcher Teil schief gehen würde, wenn ich DOCTYPE nicht einstelle: P ... immer noch verwirrt ...
Gnijuohz
@ SomeshMukherjee nein, es hat nicht funktioniert ...
Gnijuohz
Wie hoch ist es dann?
SoWhat

Antworten:

167

Das Hinzufügen <!DOCTYPE HTML>sollte dies beheben. Die gleiche Frage wurde hier gestellt: Problem beim Rendern der Texteingabe mit Twitter Bootstrap

Diego Allen
quelle
Ja. Ich habe auch eine ähnliche Frage gefunden. Ich habe sie im Kommentarbereich oben gepostet. Ich hätte diese Frage beenden sollen. Aber ich habe nicht herausgefunden, warum das Problem dadurch behoben wurde.
Gnijuohz
1
Ich danke dir sehr. Das war ein echter Schmerz.
Richard Clayton
5
Für mich behoben! Aber wieso? :)
Lukas
Ich habe gerade mehr als 2 Stunden damit verbracht, dies zu beheben, da die Symbole nicht mit den Textfeldern übereinstimmten. Durch einen Unfall wurde der Doctype gelöscht. +1 ... DANKE !!
HenryW
6
Ich habe <! DOCTYPE HTML> in meinem Dokument, und dies behebt das Problem nicht: \
Ryandawkins
7

Falls die Top-Antwort nicht geholfen hat

Ich hatte es <!DOCTYPE html>schon und es war nicht das Problem für mich. Ich weiß nicht, was das Problem ist, aber ich habe es damit in meinem CSS behoben:

input[type=text], input[type=password], input[type=email], input[type=tel] {
    height: 28px !important;
}

Es ist eine Problemumgehung und ich bin nicht sicher, ob es einige Nebenwirkungen hat.

Jeewes
quelle
3

Ich weiß nicht, warum es funktioniert, wenn ich eine saubere neue HTML5-Seite öffne, aber nachdem ich Code hinzugefügt habe, weiß ich nicht, warum es passiert. Also öffne ich einfach die Datei bootstrap.min.css und suche: type="text"und dort gibt es die Eigenschaft height und ich ändere sie in min-height, damit es funktioniert.

Tamir
quelle
2

Ja , die insgesamt heightist , 28pxweil padding & Grenze auch hinzufügen , heightum das inputwie folgt aus :

height 18px + 
4px padding-top + 
4px padding-bottom + 
1px border-top + 
1px border-bottom = 
Total 28px height
Sandeep
quelle
2

Siehe meine Lösung hier in einem ähnlichen Thread .

Grundsätzlich verursachte die Codierung der Textdatei alle meine Probleme. Es zeigte sich in so kleinen Unterschieden zwischen den Browsern, dass ich Stunden damit verschwendete, mich mit CSS zu beschäftigen, weil ich dachte, das sei die Ursache.

user1481102
quelle
Sie haben Recht, nichts mit CSS zu tun. Ich hatte das gleiche Problem mit einer meiner PHP-Dateien, die in utf8 anstelle von ASCII codiert wurden.
Nakhli