1. casa
  2. Domanda e risposta
  3. Problema di rendering dell'input di testo con Twitter Bootstrap

Problema di rendering dell'input di testo con Twitter Bootstrap

2011-08-25 19 views
28

Sto provando a utilizzare il bootstrap di Twitter per poche pagine. Sto avendo problemi per ottenere i campi di testo per rendere come fanno a http://twitter.github.com/bootstrap/Problema di rendering dell'input di testo con Twitter Bootstrap

mio HTML assomiglia

<div class="clearfix"> 
    <label for="unit">unit</label> 
    <div class="input"> 
     <input class="xlarge" id="unit" name="unit" type="text" value="" /> 
    </div> 
</div>

che sembra essere tutte le classi CSS rilevanti 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.

enter image description here

fonte

2011-08-25 totowtwo

risposta

58

Questo comportamento viene attivato anche quando il doctype viene digitato erroneamente. Nel mio caso, <!DOCTYPE> (errato) è stato corretto su <!DOCTYPE HTML> e il problema è andato via.

fonte

2011-09-08 11:21:37

+0

Inoltre, tieni presente (mi è successo) che il DOCTYPE dovrebbe essere emesso come prima cosa della tua pagina. Ho delle informazioni di debug che sono state scritte prima del DOCTYPE che hanno prodotto lo stesso effetto descritto nella domanda. – patrick

5

Questo comportamento è visto quando il documento manca <html> tag a livello più esterno. Dopo aver inserito il mio modello in un processo di riordino, sembra che dovrebbe. Grazie notepad ++.

fonte

2011-08-25 20:27:06 totowtwo

2

Ho avuto lo stesso problema, ma nel mio caso è stato causato da una codifica di 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.

fonte

2012-05-20 18:57:03 npclaudiu

-1

Il mio file è stato creato in Windows e ho avuto un problema simile, cioè l'altezza era troppo piccola, quindi i discensori erano troncati. Il mio file ha alcuni PHP come le prime linee seguite dall'html richiesto. Dopo aver letto tutti i commenti, ho spostato il mio (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.

fonte

2013-05-19 07:06:00 user2398368

+0

'DOCTYPE' deve essere la prima riga nell'HTML risultante. Ma ciò non significa che deve essere prima di qualsiasi PHP. Devi solo assicurarti che PHP non generi alcun output (inclusa la linea vuota o il carattere di spazio). Puoi anche generare 'DOCTYPE' usando PHP. –

0

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

fonte

2013-09-09 14:43:00 iconte

0

Nel mio caso:
- ho avuto il testo di input in una forma
- Ha fatto il lavoro in Firefox e non ha funzionato in Chrome

Ho fissato questo sovrascrivere l'altezza della riga nel cst di bootstrap. Prima era così:

line-height: inherit;

e quando ho cambiato nella mia css (in modo che sostituisce il css bootstrap):

line-height: normal;

ha funzionato!

Per le persone che vedono questo e non sanno di cosa sto parlando, premere f12 e andare nella casella di testo.
Ora nella scheda stili u vedrà:

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

che è quello che si desidera ignorare.

fonte

2014-04-03 12:56:28 MCollard

0

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 al seguente: enter image description here

Questo problema si presenta in Firefox il suo aspetto corretto in chrome.

Come ho trovato la soluzione:

  • So che siete pensare che questo è il problema con i CSS ottimizzare. O non c'è il CSS corretto dietro di esso.
  • Sto usando bootstrap, quindi il secondo pensiero viene in mente è che non esiste un posto di classe appropriato per inserire la casella.
  • Quando arrivo a questa domanda e ho iniziato a leggere la risposta, hanno suggerito che il problema con <!DOCTYPE html> non ci credo, ma ho iniziato a cercare quella pagina.
  • ho anche controllare con View Source in Firefox, ma è presente che <!DOCTYPE html>
  • Improvvisamente ho Esaminando il codice HTML Firebug e non c'è davvero alcun DOCTYPE ecco che arriva, mentre in tutte le altre pagine che è in arrivo.

Ora penso perché questo è 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.

fonte

2014-07-23 06:24:21

Problemi correlati

 Problemi correlati