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

我有一个问题，这个...因为它给我的滚动条，但高度保持不变使文本由滚动条覆盖...CSS问题 - 水平滚动条隐藏内容

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

提前致谢！

来源

2011-09-03 GuyFromOverThere

在Firefox 6，Chrome 13，Safari 5.1，Opera 11.5和IE9中看起来很好。您正在测试哪个版本？听起来像一个IE7问题给我。 – tw16

它在IE8 = =）（我知道......为什么我有IE 8？我认为问题在于缺少“身高”值（正如@andreas在他的回答中提到的）。他需要'高度：50px'或其他东西（足够大以显示带滚动条的文字） – jadarnel27

为什么你需要指定高度？ – melhosseiny

将你的css移动到外部样式表中，并使用条件注释仅针对你有问题的浏览器（我使用的IE7低于或等于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>

来源

2011-09-03 19:03:53 tw16

这个工程，但TD是在一张桌子，所以它使它不同 – GuyFromOverThere

@ user924770：你可以发布更多的代码，然后我可以看到你正在谈论的影响。也是滚动条*意味着*出现，或者你正在尝试使'div'展开以适应内容？ – tw16

<表样式= '宽度：80％;'> <表式= '宽度：100％;'>

– GuyFromOverThere

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

word-wrap: break-word

PS。另外，你有没有指定高度的“高度：”。

来源

2011-09-03 18:19:08 Andreas

耶srry我已经修复，但它仍然不会工作，并且换行不是所有的跨浏览器.... – GuyFromOverThere

我敢肯定，有些浏览器根本不会打破“长话”，并在那里是没有办法绕过它。但这就是换行的意义，大多数浏览器的确支持它。否则，在TD上尝试nowrap =“nowrap”，它可能会在传统浏览器上强制它。 – Andreas

这不会解决问题。即使单词包装完毕，滚动条仍然会覆盖文本的底部。 – tw16

这个工作对我来说：

<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这是大到足以显示文本和滚动条。 =）希望这有助于。

来源

2011-09-03 18:25:08 jadarnel27

这是一个很好的解决方案，除了文本和内容的长度可以在我的网页上有所不同...所以50像素将不会总是工作 – GuyFromOverThere

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

回答

相关问题