html - CSS "overflow"剔除 "background-color"-6ren

html - CSS "overflow"剔除 "background-color"

转载作者：技术小花猫更新时间：2023-10-29 11:49:35

30

4

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

最佳答案

尝试 float:left在 .codeblock pre 上.适用于 Firefox。

<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%使内部容器至少使用外部容器内的所有可见空间。

关于html - CSS "overflow"剔除 "background-color"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8513099/

30

4

0

文章推荐： html - 如何在手机上使用图片元素获得清晰的图像

文章推荐： c++ - 谁可以发送到绑定(bind)到 INADDR_LOOPBACK 的套接字？

background - watchOS 2 : background callbacks
我是 os 2 的新手，所以真的不知道从哪里开始。是否可以编写一个 WatchOs 2 应用程序，它将在后台运行并每小时唤醒一次？网上没有那么多可用的信息，但到目前为止我所看到的表明不可能编写后台应用
CSS : Background Image with Background Gradient
如何将 url 背景图像添加到渐变中并具体定位？因为梯度本身被当作图像 CSS background: linear-gradient(to bottom, #98cb01 2%,#60a822 10
安卓应用程序 : Background Image over Background Color
我是 android 开发的新手，正在开发我的第一个 android 应用程序。我在布局的 xml 中设置了 View 的背景颜色，如下所示。 android:background="@+color/
background - 使用 css3 'background-size' 属性是否足以用于视网膜显示？
为了尽可能简洁地使用样式，如果使用双像素密度设备(例如 iPhone 4)查看我的页面，我宁愿不使用包含的媒体查询样式表。话虽如此，如果我只是做这样的事情就可以了吗？ .icon-1 { bac
sprite - background-size with background-position 不缩放位置？
我有一个由 62 张 91 * 91 像素的图像组成的 Sprite ，这使得整个图像为 91 * 5642 像素。它们以动态网格的形式显示，该网格会根据用户/指针的移动而增长和缩小。有时，一个元素(
background - Unity 中的 Kinect 游戏 : How to do background removal
我一直在尝试制作一款使用 Xbox One Kinect (V2) 的 Unity 游戏。我遵循了本教程中的说明: http://www.imaginativeuniversal.com/blog/
Jquery，获取样式: background (not background-color),边框等，无法弄清楚如何做到这一点
看来firefox会自动组合一些东西，例如它需要单独的css值，例如“border-color”，“border-width”并将它们全部转储到“border”中..这使jquery变得很痛苦因为 .
javascript - 何时以及为何需要 background.html 或 background.js？
我正在构建我的第一个 Chrome 扩展程序。我浏览了 Chrome 开发人员文档，但我无法理解几个主题。我的理解: 有两个 Action : 浏览器操作(地址栏外的按钮) 页面操作(地址栏内的按钮
javascript - Chrome 扩展 : How to sendMessage form background to background?
我的后台监听器是 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) 在chrome.conte
css - 更高效的 css : background image or background rgba?
哪个更有效: 我正在尝试找出哪种提供半透明背景的方法更有效/更快: background-color: rgba(255, 255, 255, .12); 或者 background-image: u
HTML 表 : Black background tr on white background
我想要一个有 tr 作为黑色背景的表格，里面有一个白色背景的表格。
css - 安卓 Chrome : Background with "background-size: cover;"
我在我的主页上放了一个背景。它可以在除 android chrome 之外的所有浏览器上正确显示。这是我的 CSS: body.path-frontpage { background-imag
css - background-image 和 background url 中的属性
我正在尝试对我的背景图像应用滤镜，但是我遇到了 CSS 属性 URL 和线性渐变的问题。我想要的背景图片 .bg-image-full { background: no-repeat center
css - Chrome 开发人员控制台提供 'background-color' 属性而不是一般属性 'background'
在样式部分的 chrome 中使用谷歌开发者控制台时，它会立即为我提供“在我键入时”的背景颜色属性。几个月前，它一直在提供我更喜欢的一般属性(property)“背景”。是否有机会自定义这些提示，或
html - 一起使用 background-repeat 和 background-position
我正在尝试实现 faux column网站上的布局。简而言之，它涉及在包含两个垂直列的 div 上平铺背景图像，使其看起来像两个列一直延伸到底部。我的专栏如下所示: XXXX MMMM XXXX
css - background-size 和 background-repeat 究竟是如何工作的？
这是一个 example .我想裁剪背景图像，然后将裁剪图像用作更大(尺寸)元素的背景。我的意思是 div 比它的背景大，我不需要重复。现在，当 background-repeat 取消注释时，元素消
html - background-clip 和 background-origin 之间有什么区别吗？
CSS3 声明 background-clip 和 background-origin 似乎对背景有相同的效果。它们似乎都将背景限制在相对于 HTML 元素的某个区域，所以我想知道这两个声明在功能上是
CSS 相对定位与 background-image + background-position
我正在为图片库制作缩略图页面。缩略图预览作为完成 float 具有固定的方形尺寸。然而，缩略图本身不一定是正方形或相同大小，它们具有它们所代表的大图像的属性。为了让它看起来不错，我想在正方形中
javascript - 如何在 JavaScript 中获取 "Background-color: Background"-Color？
这个问题在这里已经有了答案: Get a CSS value with JavaScript (8 个答案) 关闭 6 年前。
CSS3 : remove background image (background-image:none; not working)
你好，就像我在标题中所说的 background-image:none; 不起作用，因为使用 css3 background-image:url('...'); 返回一个新层每次文件都是新的。我正在

首页

博学

6Ren·AI

商城

html - CSS "overflow"剔除 "background-color"