25
私はウェブサイトのコードブロックをスタイルしようとしています。コンテナdivは、垂直方向と水平方向の両方でオーバーフローするように設定されています。問題は、水平にオーバーフローし、ゼブラストライプの背景色が選択された場合です。私も背景の画像でそれを試しましたが、それはあまりにもそれを断つ。なぜそれをやっているのですか？どうすれば修正できますか？CSS "overflow" culls "background-color"
ありがとうございました。
画像：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>
+1興味深い質問のためにかなり興味があります。 – ptriek
他にもすべてが失敗した場合は、もちろん、コードブロックに繰り返しの背景イメージ（白/灰色）を置くことができます。非常にセクシーではない）回避策。 – ptriek
@ptriekの背景画像は '.codeblock'には作用しません。なぜなら、それはゼブラの剥ぎ取りのポイントを破るテキストでスクロールしないからです。もしあれば、背景画像は「前」または「コード」のどちらかに適用されますが、同じバックグラウンドカリングの問題に終わります。 – Obsidian