CSS problem - horizontal scrollbar hides the content
I have a problem with this one... because it gives me the scrollbar but the height remains the same so the text is cov开发者_JAVA百科ered by the scroll bar...
<td class='messages'><div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF;height:' class='messages'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>
Thanks in advance!
Move your css to an external style sheet and use a conditional comment to target just the browsers you are having a problem with (I have used lower than or equal to IE7 as I cannot replicate in IE8). I have added padding to the bottom.
Live example: http://jsfiddle.net/tw16/Vx9HZ/
Put the conditional comment in the <head> like this:
<head>
<!--[if lte IE 7]>
<style>div.messages {padding:0 0 22px;}</style>
<![endif]-->
</head>
CSS: Moved to external style sheet.
div.messages {
border:0px;
padding:0 0 0;
width:100%;
overflow-x:auto;
background-color:#66C2FF;
}
HTML: Stripped out styling.
<td class='messages'>
<div class='messages'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>
If I understand you correctly then the following should solve your issue and ALWAYS break a line to accommodate the width if specified. Put this in your style="".
word-wrap: break-word
PS. Also, you have "height:" with no height specified.
This works for 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>
I specified a height for the div that was big enough to show the text and the scroll bar. =) Hope this helps.
加载中,请稍侯......
精彩评论