Question

我遇到这个问题...因为它给了我滚动条但高度保持不变所以文本被滚动条覆盖...

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

提前致谢！

Answer 1

将您的CSS移动到外部样式表并使用条件注释仅针对您遇到问题的浏览器（我使用低于或等于IE7，因为我无法在IE8中复制）。我在底部添加了填充。

实例：http://jsfiddle.net/tw16/Vx9HZ/

将条件评论放在<head>中，如下所示：

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

CSS：已移至外部样式表。

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

HTML：删除样式。

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

Answer 2

如果我理解正确，那么以下内容应解决您的问题，并且如果指定的话，总是断开一条线以适应宽度。把它放在你的style =“”中。

word-wrap: break-word

PS。此外，您还没有指定高度的“height：”。

Answer 3

这对我有用：

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

我为height指定了div，其大小足以显示文本和滚动条。 =）希望这有帮助。

CSS问题 - 水平滚动条隐藏内容

3 个答案: