25
Tôi đang cố gắng tạo kiểu cho các khối mã cho một trang web. Vùng chứa div được đặt để tràn cả theo chiều dọc và chiều ngang. Vấn đề là khi nó tràn theo chiều ngang, màu nền ngựa vằn sọc được chọn. Tôi đã thử nó với một hình nền là tốt nhưng nó cũng loại bỏ nó. Tại sao nó làm điều đó và làm thế nào để sửa chữa nó?Trích xuất "tràn" CSS "màu nền"
Cảm ơn.
Ảnh: http://zero.robotrenegade.com/q3w/background-overflow.png
trang web (mở rộng trình duyệt của bạn rộng xuống để xem vấn đề): 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 cho câu hỏi thú vị, khá tò mò cho câu trả lời .. – ptriek
nếu mọi thứ khác không thành công, bạn có thể luôn đặt hình nền lặp đi lặp lại (trắng/xám) trên .codeblock - chắc chắn là khá chắc chắn không phải là rất sexy) workaround. Hình ảnh nền – ptriek
@ptriek trên '.codeblock' sẽ không hoạt động vì nó sẽ không cuộn với văn bản, mà đánh bại điểm của vằn vằn. Nếu bất cứ điều gì, hình nền sẽ được áp dụng cho 'tiền tố' hoặc 'mã', nhưng sau đó bạn kết thúc với cùng một vấn đề chọn lọc nền. – Obsidian