CSS“溢出"剔除“背景色" [英] CSS "overflow" culls "background-color"
问题描述
我正在尝试为网站的代码块设置样式.容器div设置为垂直和水平溢出.问题是当它水平溢出时，斑马条纹的背景色会被剔除.我也尝试过使用背景图像，但它也会剔除它.为什么这样做，我该如何解决?
I'm trying to style blocks of code for a website. The container div is set to overflow both vertically and horizontally. The problem is when it overflows horizontally, the zebra-striped background-color is culled. I tried it with a background image as well but it culls that too. Why is it doing that and how do I fix it?
谢谢.
图片: http://zero.robotrenegade.com/q3w/background-overflow. png
网页(缩小浏览器宽度以查看问题): http://zero.robotrenegade .com/q3w/code.html
Webpage (scale your browser width down to see the problem): 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>
推荐答案
在.codeblock pre上尝试float:left.在Firefox中可以使用.
Try float:left on the .codeblock pre. Works in Firefox.
<pre>适合自己放入.codeblock容器，就像没有更多空间了. float使<pre>元素的宽度恰好适合其内容.
<pre> fits itself inside the .codeblock container like there was no more room. float makes your <pre> element wide just enough to fit its content.
更新
.codeblock pre {
float: left;
min-width: 100%;}
可在Firefox，Opera，IE9和WebKit中使用
Works in Firefox, Opera, IE9 and WebKit
据我了解，带有overflow:auto的容器内的元素适合于默认情况下可见的区域.这些元素的width:100%仅与外部容器一样宽.在此示例中，在内部容器内部，您有一个code标记，该标记不会断行，因此文本会移到内部容器外部，并使外部容器显示滚动.为避免这种情况，您需要内部容器适合其内容，因此float:left.
As far as I understand, it elements inside a container with overflow:auto fit themselves inside the area that's visible by default. Those elements' width:100% is only as wide as the outer container. In this example inside of the inner container you have a code tag that doesn't break lines so the text goes outside the inner container and makes the outer container show scrolls. To avoid that, you need the inner container to fit its content hence float:left.
但是，正如您巧妙地注意到的那样(而我没有)，如果外部容器的宽度比代码宽，这种方法就不会扩展，从而避免了需要放置min-width:100%来使内部容器使用至少外部容器内的所有可见空间.
But, as you cleverly noticed (and I didn't), this way it won't expand if the outer container is wider than the code so to avoid that you need to put min-width:100% to make the inner container use at least all the visible space inside the outer container.
这篇关于CSS“溢出"剔除“背景色"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
