problema CSS - barra de desplazamiento horizontal se esconde el contenido

tengo un problema con éste ... porque me da la barra de desplazamiento, pero la altura sigue siendo la misma manera que el texto está cubierta por la barra de desplazamiento ...problema CSS - barra de desplazamiento horizontal se esconde el contenido

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

¡Gracias de antemano!

Fuente

2011-09-03 GuyFromOverThere

Me parece bien en Firefox 6, Chrome 13, Safari 5.1, Opera 11.5 e IE9. ¿En qué versión estás probando? Suena como un problema IE7 para mí. – tw16

Está reventado para mí en IE8 =) (Lo sé ... ¿por qué tengo IE 8 ???). Creo que el problema es el valor faltante de 'altura' (como @andreas menciona en su respuesta). Necesita 'Altura: 50px' o algo (lo suficientemente grande como para mostrar el texto con la barra de desplazamiento) – jadarnel27

¿Por qué necesita especificar la altura? – melhosseiny

Mueva su css a una hoja de estilo externa y use un comentario condicional para apuntar solo a los navegadores con los que tiene un problema (he usado menos o igual a IE7 ya que no puedo replicar en IE8). He agregado relleno en la parte inferior.

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

Ponga el comentario condicional en el <head> así:

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

CSS: Se traslada a la hoja de estilo externa.

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

HTML: quitó el peinado.

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

Fuente

2011-09-03 19:03:53 tw16

esto funciona, pero el td está en una tabla por lo que es diferente – GuyFromOverThere

@ user924770: Podría publicar más código para que pueda ver el efecto del que está hablando. Además, ¿las barras de desplazamiento * significa * que aparecen o está intentando hacer que el 'div 'se expanda para ajustarse al contenido? – tw16

<= td class 'mensajes'>

– GuyFromOverThere

Si le entiendo correctamente, entonces lo siguiente debería resolver su problema y SIEMPRE romper una línea para acomodar el ancho si se especifica. Pon esto en tu estilo = "".

word-wrap: break-word

PS. Además, tiene "altura:" sin altura especificada.

Fuente

2011-09-03 18:19:08 Andreas

Sí, ya lo arreglé, pero todavía no funciona y el ajuste de palabras no es todo lo que cruza el navegador ... – GuyFromOverThere

Estoy bastante seguro de que algunos navegadores simplemente no rompen "palabras largas" y no hay forma de evitarlo. Pero eso es lo que significa la palabra y la mayoría de los navegadores lo soportan. De lo contrario, pruebe nowrap = "nowrap" en el TD, podría forzarlo en los navegadores heredados. – Andreas

Esto no resolverá el problema. Incluso si las palabras se abrieron, la barra de desplazamiento todavía cubrirá la parte inferior del texto. – tw16

Esto funciona para mí:

<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>

que especifica un height para la div que era lo suficientemente grande para mostrar el texto y la barra de desplazamiento. =) Espero que esto ayude.

Fuente

2011-09-03 18:25:08 jadarnel27

esta es una buena solución a excepción de que la longitud del texto y el contenido puede variar en mi página ... así que 50 px no siempre funcionarán – GuyFromOverThere

problema CSS - barra de desplazamiento horizontal se esconde el contenido

Respuesta

Cuestiones relacionadas