CSS "overflow" отбраковывает "background-color" - PullRequest
Новая
       41

CSS "overflow" отбраковывает "background-color"

26 голосов
/ 15 декабря 2011

Я пытаюсь стилизовать блоки кода для веб-сайта.Контейнер 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();
    }
}

Ответы [ 5 ]

6 голосов
/ 15 декабря 2011

Попробуйте 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%, чтобы внутренний контейнер использовал как минимум все видимое пространство внутри внешнего контейнера.

1 голос
/ 15 декабря 2011

Попробуйте: 

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

Это сработало для меня в Safari.

1 голос
/ 15 декабря 2011

Линии расширяются как каждый элемент блока до максимальной ширины - и это без переполнения.И они не связаны - если один больше, это не влияет на другие.

Попробуйте изменить их на что-то другое, чем элемент блока, например: 

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

Изменение типов, связанных с таблицейширина или высота (ячейки) вместе

http://jsfiddle.net/D7rND/

0 голосов
/ 08 марта 2017

Я только что добавил {float:left} к div'ам, чьи фоны были "забракованы" в моей ситуации.

С этим изменением фон и границы будут расширяться вместе с переполненным текстом. Поэтому при горизонтальной прокрутке текст отображается равномерно с тем же фоном и границами.

Перед добавлением этого фрагмента CSS фон / рамка не будут выходить за пределы div, хотя текст будет.

0 голосов
/ 15 декабря 2011

Используйте правильный формат DTD. Это хорошо для Firefox, хотя ...

...