CSS「溢出」挑選「背景色」

我試圖爲網站的樣式代碼塊。容器div被設置爲垂直和水平都溢出。問題是當它水平溢出時，斑馬條紋背景顏色被剔除。我也嘗試過使用背景圖片，但也挑選了它。它爲什麼這樣做，我該如何解決它？CSS「溢出」挑選「背景色」

謝謝。

圖片：http://zero.robotrenegade.com/q3w/background-overflow.png

網頁（擴展您的瀏覽器的寬度往下看問題）：http://zero.robotrenegade.com/q3w/code.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="created" content=""> 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 
    <link rel="stylesheet" href="" type="text/css" media="all" title="Default styles" /> 
    <title></title> 
    <!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      jQuery("pre code").html(function(index, html) { 
        return html.replace(/^(.*)$/mg, "<span class=\"line\">$1</span>") 
      }); 
     }); 
    </script> 
<style> 
.codeblock { 
    max-height: 25em; 
    overflow: auto; 
    margin: 1em; 
    border: 1px solid #ccc; 
    font-size: 1em; 
    line-height: normal; 
    border-radius: 8px; 
    box-shadow: 0px 0px 4px rgba(0,0,0,0.25); 
} 
.codeblock h1, .codeblock p { 
    font-size: 1em; 
    margin: 0; 
    padding: 0em 1em 0.5em 3.5em; 
    line-height: 2em; 
    background-color: #eee; 
} 
.codeblock pre { 
    margin: 0; 
    padding: 0; 
    font-face: 'lucida console',monaco,courier,'courier new',monospace; 
} 
.codeblock pre code { 
    counter-reset: line-numbering; 
    margin: 0; 
    padding: 0; 
} 
.codeblock pre code .line::before { 
    content: counter(line-numbering); 
    counter-increment: line-numbering; 
    padding-right: 0.5em; 
    width: 4.5em; 
    text-align: right; 
    color: #888; 
    border-right: 1px dotted #888; 
    display: inline-block; 
    background-color: #eee; 
} 
.codeblock pre code .line { 
    display: block; 
    margin: 0 0 -1.2em 0; 
    line-height: 1.5em; 
} 
.codeblock pre code .line:nth-child(odd) { 
    background: #f2f5f9; 
} 
/*.codeblock pre code .line:hover { 
    background: #4b95e5; 
    color: #fff; 
}*/ 
</style> 

</head> 
<body> 

<div class="codeblock"><!--<h1>Hello, this is an optional header.</h1>--> 
<pre><code>void idAF::Restore(idRestoreGame *savefile) { 
    savefile->ReadObject(reinterpret_cast<idClass *&>(self)); 
    savefile->ReadString(name); 
    savefile->ReadBool(hasBindConstraints); 
    savefile->ReadVec3(baseOrigin); 
    savefile->ReadMat3(baseAxis); 
    savefile->ReadInt(poseTime); 
    savefile->ReadInt(restStartTime); 
    savefile->ReadBool(isLoaded); 
    savefile->ReadBool(isActive); 

    animator = NULL; 
    modifiedAnim = 0; 

    if (self) { 
     SetAnimator(self->GetAnimator()); 
     Load(self, name); 
     if (hasBindConstraints) { 
      AddBindConstraints(); 
     } 
    } 

    savefile->ReadStaticObject(physicsObj); 

    if (self) { 
     if (isActive) { 
      // clear all animations 
      animator->ClearAllAnims(gameLocal.time, 0); 
      animator->ClearAllJoints(); 

      // switch to articulated figure physics 
      self->RestorePhysics(&physicsObj); 
      physicsObj.EnableClip(); 
     } 
     UpdateAnimation(); 
    } 
}</code></pre> 
<!-- <p>This is an optional footer, goodbye!</p> --> 
</div> 

</body> 
</html>

來源

2011-12-14 Obsidian

+1有趣的問題，很好奇的答案.. – ptriek 2011-12-14 23:52:04

如果一切都失敗了，你當然可以總是在.codeblock上放置一個重複的背景圖像（白色/灰色） - 這應該是一個非常穩固不是很性感）的解決方法。 – ptriek 2011-12-14 23:58:52

'.codeblock'上的@ptriek背景圖片將不起作用，因爲它不會滾動文本，從而破壞了斑馬條的清除點。如果有的話，背景圖像將被應用於'pre'或'code'，但是最終會出現相同的背景剔除問題。 – Obsidian 2011-12-15 16:21:22

在.codeblock pre嘗試float:left 。適用於Firefox。

<pre>適合在.codeblock容器內，就像沒有更多的空間。 float使您的<pre>元素寬度足以適合其內容。

UPDATE

.codeblock pre { 
    float: left; 
    min-width: 100%;}

工作在Firefox，歌劇，IE9和WebKit

據我瞭解，它overflow:auto容器內的元素適合自己的，默認情況下是可見的區域內。那些元素'width:100%只與外部容器一樣寬。在這個例子裏面的內部容器中，你有一個code標籤，它不會破壞線條，所以文本會進入內部容器的外部，並使外部容器顯示滾動條。爲了避免這種情況，你需要內部容器來適應其內容，因此float:left。

但是，正如你巧妙地注意到的（我沒有），這種方式不會擴大，如果外部容器比代碼寬，以避免你需要把min-width:100%使內部容器使用至少所有外部容器內的可見空間。

來源

2011-12-14 23:44:16 szym

線正在擴大像每一個塊元素的最大寬度 - 這是沒有溢出。而且他們沒有聯繫 - 如果一個更大，它不會影響其他人。

試戴改變到比塊元件別的東西，像：

.codeblock pre code .line { 
    display: table-row; 
}

表相關的類型改變寬度或高度（細胞）一起

http://jsfiddle.net/D7rND/

來源

2011-12-14 23:34:39

它只適用於Firefox。歌劇或webkit不缺乏。 – Litek 2011-12-14 23:38:24

我確認這將不會在WebKit的 – ptriek 2011-12-14 23:52:51

嘗試：

.codeblock pre, .codeblock pre code { 
    display: inline-block; 
}

這在Safari爲我工作。

來源

2011-12-15 00:05:20

使用適當的DTD format.it的良好的Firefox，但...

來源

2011-12-15 14:49:27

我只是說{float:left}到div的背景，其在我的情況正在「撲殺」。

通過此更改，背景和邊框將與溢出文本一起擴展。因此，當我水平滾動時，文本會以相同的背景和邊框一致顯示。

在添加這段CSS之前，背景/邊框不會超出div，儘管文字會。

來源

2017-03-07 21:01:21 nschwan94

CSS「溢出」挑選「背景色」

回答

相關問題