problema CSS - barra di scorrimento orizzontale nasconde il contenuto

Ho un problema con questo ... perché mi dà la barra di scorrimento ma l'altezza rimane lo stesso modo che il testo è coperto dalla barra di scorrimento ...problema CSS - barra di scorrimento orizzontale nasconde il contenuto

<td class='messages'><div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF;height:' class='messages'> 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
</div> 
</td>

Grazie in anticipo!

fonte

2011-09-03 GuyFromOverThere

Mi sembra a posto in Firefox 6, Chrome 13, Safari 5.1, Opera 11.5 e IE9. In quale versione stai provando? Sembra un problema IE7 per me. – tw16

È stato eliminato per me in IE8 =) (lo so ... perché ho IE 8 ???). Penso che il problema sia il valore di altezza mancante (come menziona @andreas nella sua risposta). Ha bisogno di "Altezza: 50 px" o qualcosa del genere (abbastanza grande da mostrare il testo con la barra di scorrimento) – jadarnel27

Perché è necessario specificare l'altezza? – melhosseiny

Sposta il tuo css su un foglio di stile esterno e usa un commento condizionale per indirizzare solo i browser con i quali stai avendo un problema (ho usato inferiore o uguale a IE7 poiché non riesco a replicare in IE8). Ho aggiunto l'imbottitura sul fondo.

vivo esempio: http://jsfiddle.net/tw16/Vx9HZ/

Mettere il commento condizionale nel <head> come questo:

<head> 
    <!--[if lte IE 7]> 
     <style>div.messages {padding:0 0 22px;}</style> 
    <![endif]--> 
</head>

CSS: trasferisce a foglio di stile esterno.

div.messages { 
    border:0px; 
    padding:0 0 0; 
    width:100%; 
    overflow-x:auto; 
    background-color:#66C2FF; 
}

HTML: Stripped fuori styling.

<td class='messages'> 
    <div class='messages'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
    </div> 
</td>

fonte

2011-09-03 19:03:53 tw16

questo funziona ma il td è in una tabella in modo da renderlo diverso – GuyFromOverThere

@ user924770: Potresti postare più codice quindi posso vedere l'effetto di cui stai parlando. Inoltre, le barre di scorrimento * significano * apparire o stai cercando di fare in modo che l'espansione 'div' si adatti al contenuto? – tw16

– GuyFromOverThere

Se ho capito bene, il seguente dovrebbe risolvere il problema e SEMPRE interrompere una linea per adattarla alla larghezza se specificato. Metti questo nel tuo stile = "".

word-wrap: break-word

PS. Inoltre, hai "altezza:" senza altezza specificata.

fonte

2011-09-03 18:19:08 Andreas

sì srry l'ho già risolto ma non funzionerà e il word-wrap non è tutto quel cross-browser .... – GuyFromOverThere

Sono abbastanza sicuro che alcuni browser semplicemente non rompono le "parole lunghe" e lì non c'è modo di aggirarlo. Ma è a questo che serve il word-wrap e la maggior parte dei browser lo supporta. Altrimenti, prova nowrap = "nowrap" sul TD, potrebbe forzarlo sui browser legacy. – Andreas

Questo non risolverà il problema. Anche se le parole si sono concluse, la barra di scorrimento coprirà comunque la parte inferiore del testo. – tw16

questo funziona per me:

<html> 
    <body> 
    <td class='messages'> 
     <div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF; height= 50PX; class=messages;'> 
     AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
     </div> 
    </td> 
    </body> 
</html>

ho specificato un height per il div che era abbastanza grande per visualizzare il testo e la barra di scorrimento. =) Spero che questo aiuti.

fonte

2011-09-03 18:25:08 jadarnel27

questa è una buona soluzione ad eccezione del fatto che la lunghezza del testo e del contenuto può variare sulla mia pagina .... quindi 50 px non funzionerà sempre – GuyFromOverThere

problema CSS - barra di scorrimento orizzontale nasconde il contenuto

risposta

Problemi correlati