CSS "overflow“剔除"background-color”
我正在尝试为一个网站设置代码块的样式。容器div设置为垂直和水平溢出。问题是当它水平溢出时，斑马条纹的背景色就会被剔除。我也尝试了背景图像，但它也剔除了背景图像。它为什么要这么做?我该如何修复它？
谢谢。
图片来源：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>回答 5
Stack Overflow用户
发布于 2011-12-15 07:44:16
在.codeblock pre上试用float:left。在Firefox中工作。
<pre>适合.codeblock容器，就像没有更多的空间一样。float使<pre>元素的宽度恰好适合其内容。
更新
.codeblock pre {
float: left;
min-width: 100%;}适用于火狐、歌剧、IE9和WebKit
据我所知，带有overflow:auto的容器中的it元素适合默认情况下可见的区域。这些元素的width:100%仅与外部容器一样宽。在本例中，内部容器内部有一个不会换行的code标记，因此文本位于内部容器外部，并使外部容器显示滚动。为了避免这种情况，你需要内部容器来适应它的内容，因此float:left。
但是，正如您聪明地注意到的(我没有注意到)，如果外部容器比代码更宽，那么它就不会扩展，以避免您需要放置min-width:100%来使内部容器至少使用外部容器内的所有可见空间。
Stack Overflow用户
发布于 2011-12-15 07:34:40
线条就像每个块元素一样扩展到最大宽度--而且没有溢出。而且它们是不相连的--如果一个更大，它不会影响其他人。
尝试将它们更改为块元素以外的其他元素，如下所示：
.codeblock pre code .line {
display: table-row;
}与表格相关的类型会同时更改宽度或高度(单元格)
http://jsfiddle.net/D7rND/
Stack Overflow用户
发布于 2011-12-15 08:05:21
尝试：
.codeblock pre, .codeblock pre code {
display: inline-block;
}在Safari中，这对我很有效。
https://stackoverflow.com/questions/8513099
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号