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

Question

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

5

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

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

感谢您的提前支持！

- GuyFromOverThere

1

在 Firefox 6、Chrome 13、Safari 5.1、Opera 11.5 和 IE9 中我觉得都没问题。你用的是哪个版本进行测试？听起来像是 IE7 的问题。 - tw16

在IE8中，它对我来说是破损的 =)（我知道...为什么我还在用IE 8？？？）。我认为问题在于缺少height值（正如@andreas在他的答案中提到的那样）。他需要Height:50px或其他一些值（足够大以显示带滚动条的文本）。 - Josh Darnell

为什么需要指定高度？ - melhosseiny

3个回答

2

如果我理解你的意思正确，那么以下内容应该可以解决你的问题，并且始终换行以适应指定的宽度。将此内容放入style = ""中。

word-wrap: break-word

PS. 同时，你使用了“height:”但没有指定高度。

- Andreas

抱歉，我已经修复了，但它仍然无法正常工作，而且自动换行并不是跨浏览器的最佳解决方案。 - GuyFromOverThere

我相当确定有些浏览器根本不会分隔“长单词”，并且没有什么办法可以解决。但这就是 word-wrap 的作用，大多数浏览器确实支持它。否则，尝试在 TD 上使用 nowrap="nowrap"，它可能会强制在旧版浏览器上使用。 - Andreas

这并不能解决问题。即使文字换行了，滚动条仍然会覆盖文本底部。 - tw16

2

这对我有用：

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

我为 div 指定了一个足够大的 height 来显示文本和滚动条。 =) 希望这能帮到你。

- Josh Darnell

这是一个不错的解决方案，但我的页面上文本和内容的长度可能会有所变化...因此，50像素并不总是适用。 - GuyFromOverThere

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tw16 · Accepted Answer

将CSS移至外部样式表，使用条件注释仅针对你遇到问题的浏览器进行目标定位（我已经使用小于或等于IE7，因为我无法在IE8中复制）。我已经在底部添加了填充。

实时示例：http://jsfiddle.net/tw16/Vx9HZ/ 将条件注释放在中，如下所示：

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