CSS“溢出”剔除“背景颜色”答案

【问题标题】：CSS "overflow" culls "background-color"CSS“溢出”剔除“背景颜色”
【发布时间】：2011-12-14 23:15:25
【问题描述】：

我正在尝试为网站设置代码块样式。容器 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>

【问题讨论】：

+1 有趣的问题，很好奇答案..
如果一切都失败了，你当然可以在 .codeblock 上放置一个重复的背景图像（白色/灰色）——这应该是一个非常可靠（虽然不是很性感）的解决方法。
'.codeblock' 上的@ptriek 背景图像将不起作用，因为它不会随文本滚动，这会破坏斑马剥离点。如果有的话，背景图像将应用于“pre”或“code”，但最终会遇到相同的背景剔除问题。

标签： html css background overflow

【解决方案1】：

在.codeblock pre 上尝试float:left。在火狐中工作。

<pre> 适合自己在 .codeblock 容器中，就像没有更多空间一样。 float 使您的 <pre> 元素的宽度刚好适合其内容。

更新

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

适用于 Firefox、Opera、IE9 和 WebKit

据我所知，overflow:auto 的容器内的元素适合自己在默认可见的区域内。这些元素的width:100% 仅与外部容器一样宽。在这个内部容器内部的示例中，您有一个不会换行的code 标记，因此文本会出现在内部容器之外并使外部容器显示滚动。为避免这种情况，您需要内部容器来适应其内容，因此float:left。

但是，正如您聪明地注意到的那样（我没有注意到），如果外部容器比代码宽，这样它就不会扩展，以避免您需要输入 min-width:100% 来使内部容器使用至少外容器内的所有可见空间。

【讨论】：

好的，解决了问题 - 但创建了一个新问题：在更宽的屏幕上，行的宽度不会扩展到 100%
已更新。但要获得完整的理解，您应该查看 w3 规范。
哦，太棒了！完美运行。我已经盯着这个问题 2 天了。
为什么是float？这是一个奇怪的黑客。只需使用 display: inline-block 代替。在不浮动元素的情况下做同样的事情。

【解决方案2】：

线条像每个块元素一样扩展到最大宽度 - 并且没有溢出。而且它们没有连接 - 如果一个更大，它不会影响其他人。

尝试将它们更改为块元素以外的其他内容，例如：

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

与表格相关的类型一起改变宽度或高度（单元格）

http://jsfiddle.net/D7rND/

【讨论】：

【解决方案3】：

试试：

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

这在 Safari 中对我有用。

【讨论】：

与@szym 答案相同的问题，背景不会在更广泛的浏览器中展开
是的，我忘了回去展开浏览器。对不起。
只需添加min-width: 100%，它将按照 OP 对短线的预期方式工作。

【解决方案4】：

使用正确的 DTD 格式。不过它在 firefox 上很好用...

【讨论】：

什么？ <!doctype html> 触发标准模式，这是你能做的最好的。

【解决方案5】：

我刚刚将 {float:left} 添加到 div 中，其背景在我的情况下被“剔除”。

通过此更改，背景和边框将随着溢出的文本而扩展。因此，当我水平滚动时，文本会以相同的背景和边框均匀显示。

在添加这段css之前，背景/边框不会溢出div，虽然文本会溢出。

【讨论】：