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問題 - 水平滾動條隱藏內容

回答

相關問題