Problema di rendering dell’input di testo con Twitter Bootstrap

Sto cercando di usare il bootstrap di Twitter per poche pagine. Sto riscontrando problemi nel rendere i campi di testo da rendere come fanno a http://twitter.github.com/bootstrap/

Il mio HTML sembra

Che sembra essere tutte le classi CSS pertinenti che vedo sulla pagina demo. Tuttavia, i miei campi di input di testo rendono l’area di input troppo piccola verticalmente, quindi il cursore e il testo si sovrappongono al bordo inferiore dell’area di input. Questo è con l’ultimo chrome su win7.

inserisci la descrizione dell'immagine qui

Questo comportamento si triggers anche quando il doctype viene digitato erroneamente. Nel mio caso, (errato) è stato corretto su e il problema è andato via.

http://twitter.github.com/bootstrap/scaffolding.html

Richiede il doctype HTML5 Bootstrap utilizza elementi HTML e proprietà CSS che richiedono l’uso del doctype HTML5. Assicurati di includerlo all’inizio di ogni pagina Bootstrapped nel tuo progetto.

   ...  

Questo comportamento si verifica quando il documento non contiene tag al livello più esterno. Dopo aver inserito il mio modello in un processo di riordino, sembra che dovrebbe. Grazie notepad ++.

Ho avuto lo stesso problema, ma nel mio caso è stato causato da una codifica del testo incoerente tra i file. Alcuni file sono stati codificati in UTF-8 senza BOM (byte order mark), mentre altri file sono stati codificati in UTF-8 con BOM incluso. Ho cambiato tutti i file in UTF-8 senza BOM e ha funzionato correttamente.

sostituire class="x-large" in: class="input-block-level"

Nel mio caso:
– Ho avuto il testo di input in una forma
– Funzionava con Firefox e non funzionava in Chrome

Ho risolto il problema sovrascrivendo l’altezza della riga nel cst bootstrap. Prima era così:

 line-height: inherit; 

e quando l’ho cambiato nel mio css (quindi sovrascrive il css di bootstrap):

 line-height: normal; 

Ha funzionato!


Per le persone che vedono questo e non sanno di cosa sto parlando, premi F12 e vai nella tua casella di testo.
Ora nella scheda degli stili vedrai:

 input, button, select, textarea { font-family: inherit; font-size: inherit; font-height: inherit; } 

è quello che vuoi scavalcare.

Grazie a tutti, questo mi aiuta.
Affronto anche questo problema, per aiutare l’altro utente a condividere il mio viaggio come lo risolvo. Il problema è simile a questo: inserisci la descrizione dell'immagine qui

Questo problema arriva in Firefox il suo aspetto corretto in chrome.

Come ho trovato la soluzione:

  • So che pensi che questo sia il problema con css ottimizzare. O non c’è il CSS corretto dietro di esso.
  • Sto usando bootstrap, quindi il secondo pensiero viene in mente è che non c’è un posto di class appropriato per inserire la casella.
  • Quando sono arrivato a questa domanda e ho iniziato a leggere la risposta, hanno suggerito che il problema con non credo, ma ho iniziato a cercare quella pagina.
  • Controllo anche con View Source in Firefox, ma è presente
  • All’improvviso guardo il firebug html e non c’è davvero nessun DOCTYPE che viene qui mentre è in arrivo in tutte le altre pagine.

Ora penso perché è successo, la ragione è dietro.
Poi guardo le pagine jsp. Questo è il problema nel mio caso, qualcuno include l’altra pagina jsp prima del corpo.

Spero che questo aiuto highlight.

Il mio file è stato creato all’interno di Windows e ho avuto un problema simile, ovvero l’altezza era troppo piccola per cui i discendenti venivano troncati. Il mio file ha alcuni PHP come le prime linee seguite dall’html richiesto. Dopo aver letto tutti i commenti, ho spostato la mia (2 linee) in cima al PHP e l’altezza è aumentata … quindi risolto il problema. Sembra che DOCTYPE debba essere all’inizio anche prima di qualsiasi PHP.