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

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

css

CSS问题-水平滚动条隐藏内容,css,overflow,Css,Overflow,我对这个有问题。。。因为它给了我滚动条，但高度保持不变，所以文本被滚动条覆盖 <td class='messages'><div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF;height:' class='messages'> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

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

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


aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

提前谢谢

如果我对您的理解正确，那么以下内容应该可以解决您的问题，并且如果指定，请始终断开一条线以适应宽度。把这个放在你的风格中

另外，您有“高度：”但没有指定高度。

这对我很有用：

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


aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

我为

div

指定了一个

height

，它足够大，可以显示文本和滚动条。=）希望这能有所帮助。

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

实例：

将条件注释放在

中，如下所示：

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

HTML:精简了样式

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


aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

在Firefox 6、Chrome 13、Safari 5.1、Opera 11.5和IE9中，我觉得很好。您正在测试哪个版本？对我来说，听起来像是IE7的问题。它在IE8=）中对我来说是失败的（我知道…为什么我有IE8？？）。我认为问题在于缺少

高度值（正如@andreas在回答中提到的）。他需要Height:50px
或者什么（大到可以用滚动条显示文本）你为什么需要指定高度？是的，我已经修复了这个问题，但它仍然不起作用，而且word wrap也不完全是跨浏览器的。我很确定，有些浏览器根本不会打断“长单词”，而且没有办法解决这个问题。但这就是word wrap的用途，大多数浏览器确实支持它。否则，请在TD上尝试nowrap=“nowrap”，它可能会强制在传统浏览器上使用。这不会解决问题。即使文字已换行，滚动条仍将覆盖文本底部。这是一个很好的解决方案，除了文本长度和内容在我的页面上可能会有所不同。。。。所以50像素并不总是如此work@user924770：你能再发一些代码吗？这样我就能看到你所说的影响。另外，滚动条是要显示的还是您正试图使div展开以适应内容@用户924770：我很高兴能帮上忙。但是我恐怕不明白你所说的“td在一个表中，所以它使它变得不同”是什么意思。上面的代码对我没有帮助，因为我看不到测试用例，所以我不能告诉你看到了什么。好的，你可以将这个html代码添加到你制作的JFIDLE脚本中：这里有很多单词，它可以使这个内容不出现错误。图片将以60pxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
div.messages {
    border:0px;
    padding:0 0 0;
    width:100%;
    overflow-x:auto;
    background-color:#66C2FF;
}

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