如何防止滾動條重疊內容？

我有一個預先格式化的代碼塊（<pre>），它水平溢出，所以有一個水平滾動條允許用戶查看內容。如何防止滾動條重疊內容？

overflow: auto;

然而，在IE7（也許其他的IE版本），滾動條重疊我的內容的最後一行（這是特別刺激的時候只有一個行的內容）。

我試過列出的解決方案here，但它沒有奏效。

唯一可行的解決方案是使用

overflow: scroll;

增加了一個滾動條來我所有的預格式化部分是太噁心了。

注意：它在Firefox 3和Google Chrome中運行良好。

更新

我已經找到了解決方案（見我的答案），但是，如果有人發現了一種沒有在IE7每個預格式化部分醜陋的填充，這將是完美的。

來源

2009-01-13 mbillard

就在發佈問題後，我想過檢查是否stackoverflow處理（它）。

我看了看樣式表，發現這個：

padding-bottom: 19px!ie7;

（當然，他們使用20像素，但19更好看）。

它只爲IE7添加了一個底部填充，這使得每個沒有滾動條的預先格式化的部分看起來有點怪異，因爲巨大的填充，但至少我可以看到內容（並且它在stackoverflow中也看起來很奇怪）。

抱歉太快提問。

來源

2009-01-13 16:18:23 mbillard

您可以將padding-bottom放置在僅限IE的樣式表中;這個頁面認爲'！ie7'是一個黑客：http：// css-tricks。com/how-to-create-an-ie-only-stylesheet/ – 2013-04-24 18:36:24

將您的PRE換成DIV並加上一些額外的餘量。

來源

2009-01-13 16:09:48

將PRE換成DIV並將overflow: scroll;應用於DIV。確保你使用<div style="overflow: scroll; width='...'; height='...';">或者爲div分配一個類，以確保它們都不是滾動條。

例如，在我的博客中，我使用<div style="overflow: scroll; width: 100%;">來處理小塊代碼，這樣人們可以水平滾動，並且div會增長到正確的高度。對於較長的作品，我還會指定一個高度以減少整篇文章的長度;人們也可以垂直滾動。

你也可以嘗試<div style="overflow: scroll; overflow-y: hidden; width: 100%;">只得到一個水平滾動條（而不是兩個和其中一個被禁用）。也許<div style="overflow-x: scroll; width: 100%;">也適用。

來源

2009-01-13 16:25:15

這將爲我提到的每個DIV添加一個滾動條，我不想要。 – mbillard 2009-01-13 16:36:32

只需添加style =「overflow：scroll;」而不是在所有DIV的CSS樣式表中指定它。 – 2009-01-14 11:08:21

將「padding-bottom：20px」添加到預標記中

來源

2009-01-13 18:02:08

如何防止滾動條重疊內容？

回答

相關問題