Elementos predeterminados de IE7 a 100% de ancho

StackOverflow https://stackoverflow.com/questions/618507

  •  03-07-2019
  •  | 
  •  

Pregunta

Tengo un problema realmente frustrante con una aplicación web en la que trabajo (originalmente no la escribí). Utiliza marcos para el diseño bastante asustadizo. El problema que tengo es que todos los elementos con un color de fondo y un borde establecidos a través de CSS están predeterminados a 100% de ancho. Acabo de probar elementos div, elementos de párrafo, etc.

Quité la hoja de estilo completamente y luego la probé y tuve el mismo problema, por lo que no es la hoja de estilo la que causa el problema.

Escribí una prueba rápida para asegurarme de que no era un código conflictivo y usé el mismo doctype y xmlns que el nuestro. Tengo el mismo problema. Aquí está el código de ejemplo. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    #test {
        border:1px solid #ccc;
        background-color:#ddd;
    }
</style>
</head>
<body>
    <div id="test">
        Test information!
    </div>
</body>
</html>

¿Alguna idea?

¿Fue útil?

Solución

Creo que esto es requerido por HTML / CSS. Los elementos de bloque extienden el ancho completo a menos que haya algo que los detenga.

(FF tiene el mismo comportamiento.)

Otros consejos

No es porque el elemento tenga un fondo o un borde con el que se expande por completo, sino porque es un elemento de bloque. El fondo o borde simplemente te hace ver cuán grande es realmente el elemento.

El ancho predeterminado en realidad no es " 100% " ;, sino " auto " ;. La diferencia práctica es que el elemento que incluye los bordes utiliza el 100% del ancho, en lugar del ancho excluyendo los bordes que se convierten en el 100% del ancho (lo que hace que el ancho que incluye los bordes sea más ancho que su elemento primario).

Si no desea que el elemento use el ancho disponible, puede convertirlo en un elemento flotante. Entonces se ajustará a su contenido. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    #test1 {
        float: left;
        border:1px solid #ccc;
        background-color: #ddd;
    }
    #test2 {
        float: left;
        clear: both;
        border:1px solid #000;
        background-color: #ccf;
    }
    </style>
</head>
<body>
    <div id="test1">
        Test information!
    </div>
    <div id="test2">
        Test information!
    </div>
</body>
</html>

Como dicen Richard y BeefTurkey, los divs son elementos de bloque y llenarán el ancho del navegador.

Puedes usar un elemento en línea, como un tramo 

<span id="test">
    Test information!
</span>

o agrega algún estilo a tu div para forzarlo a estar en línea 

div#test { display: inline; }

¿Los valores predeterminados de los divs no son 100% (del tamaño de los padres) porque son bloques? Siempre puede intentar cambiar la visualización a inline: #test {display: inline;}

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top