CSS "desbordamiento" elimina el "color de fondo"

Estoy intentando diseñar bloques de código para un sitio web. El contenedor div está configurado para desbordar tanto vertical como horizontalmente. El problema es que cuando se desborda horizontalmente, se selecciona el color de fondo con rayas de cebra. Lo intenté con una imagen de fondo también, pero también descarta eso. ¿Por qué está haciendo eso y cómo lo soluciono?CSS "desbordamiento" elimina el "color de fondo"

Gracias.

Image: http://zero.robotrenegade.com/q3w/background-overflow.png

página web (escala de su navegador ancho hacia abajo para ver el problema): 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>

Fuente

2011-12-14 Obsidian

+1 por pregunta interesante, bastante curioso por la respuesta .. – ptriek

si todo lo demás falla, por supuesto siempre puedes poner una imagen de fondo repetida (blanco/gris) en el bloque de código. Eso debería ser bastante sólido (aunque no muy sexy) solución alternativa. – ptriek

La imagen de fondo de @ptriek en '.codeblock' no funcionará, ya que no se desplazará con el texto, lo que frustra el punto de cebra. En todo caso, la imagen de fondo se aplicaría a 'pre' o 'código', pero luego terminarás con el mismo problema de eliminación de fondo. – Obsidian

Pruebe float:left en la .codeblock pre . Funciona en Firefox.

<pre> se acomoda dentro del contenedor .codeblock como si no hubiera más espacio. float hace que su elemento <pre> sea lo suficientemente ancho para ajustarse a su contenido.

ACTUALIZACIÓN

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

funciona en Firefox, Opera, IE9 y WebKit

Por lo que yo entiendo, él elementos dentro de un recipiente con overflow:auto encajan a sí mismos dentro de la zona que es visible por defecto. Esos elementos 'width:100% tienen el mismo ancho que el contenedor externo. En este ejemplo, dentro del contenedor interno, tiene una etiqueta code que no divide las líneas, por lo que el texto sale del contenedor interno y hace que el contenedor externo se desplace. Para evitar eso, necesita que el contenedor interno se ajuste a su contenido, por lo tanto, float:left.

Pero, como usted ha notado inteligentemente (y yo no), de esta manera no se expandirá si el contenedor externo es más ancho que el código, para evitar que necesite poner min-width:100% para usar el contenedor interno en al menos todo el espacio visible dentro del contenedor externo.

Fuente

2011-12-14 23:44:16 szym

bien, resuelve el problema, pero crea uno nuevo: el ancho de las filas no se ampliará al 100% en una pantalla más amplia – ptriek

ahora funciona :) – szym

que parece funcionar de hecho, ¿puedes explicar? – ptriek

líneas están expandiendo como cada elemento de bloque a la anchura máxima - y eso es sin rebosadero. Y no están conectados; si uno es más grande, no afecta a los demás.

trate de cambiar a algo más que elemento de bloque, como que:

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

tipos relacionados Cuadro-cambio de anchura o altura (células) junto

http://jsfiddle.net/D7rND/

Fuente

2011-12-14 23:34:39

Solo es bueno para Firefox. Sin fallas en la opera o en el webkit. – Litek

confirmo que esto no funcionará en webkit – ptriek

Probar:

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

Esto funcionó para mí en Safari.

Fuente

2011-12-15 00:05:20

mismo problema que @szym answer, el fondo no se expandirá en un navegador más amplio – ptriek

Sí, olvidé volver atrás y expandir el navegador. Lo siento. –

Simplemente agregue 'min-width: 100%' y funcionará de la manera que OP espera para líneas cortas. –

Utilice un DTD de format.it adecuada bien en Firefox, aunque ...

Fuente

2011-12-15 14:49:27

¿Qué? '' activa el modo estándar, esto es lo mejor que puede hacer. – duri

simplemente he añadido a la {float:left} cuyos fondos estaban siendo "sacrificados" en mi situación de div.

Con este cambio, los fondos y bordes se extenderían con el texto desbordado. De modo que cuando me desplazo horizontalmente, el texto se muestra uniformemente con el mismo fondo y bordes.

Antes de agregar esta pieza de CSS, el fondo/borde no se desbordará más allá de div, aunque el texto sí lo haría.

Fuente

2017-03-07 21:01:21 nschwan94

CSS "desbordamiento" elimina el "color de fondo"

Respuesta

Cuestiones relacionadas