posicionamiento - posicionar div html

Elemento secundario de ancho de porcentaje en el elemento principal en posición absoluta en Internet Explorer 7

Question

Tengo un div absolutamente posicionado que contiene varios hijos, uno de los cuales es un div relativamente posicionado. Cuando utilizo un ancho basado en porcentaje en el div , se colapsa a ''0'' en Internet Explorer 7 , pero no en Firefox o Safari.

Si uso ancho de píxel , funciona. Si el padre está relativamente posicionado, el porcentaje de ancho del niño funciona.

1. ¿Hay algo que me estoy perdiendo aquí?
2. ¿Hay una solución fácil para esto además del ancho basado en píxeles en el niño?
3. ¿Hay un área de la especificación CSS que cubre esto?

Answer 1

¿Por qué no funciona el ancho de porcentaje hijo en padre con posición absoluta en IE7?

Porque es Internet Exploder

¿Hay algo que me estoy perdiendo aquí?

Es decir, para aumentar la conciencia de sus compañeros de trabajo / clientes de que IE apesta.

¿Hay una solución fácil además del ancho basado en píxeles en el niño?

Utilice las unidades em , ya que son más útiles al crear diseños líquidos, ya que puede usarlos para el relleno y los márgenes, así como los tamaños de fuente. Por lo tanto, su espacio en blanco crece y se reduce proporcionalmente a su texto si se redimensiona (lo que realmente es lo que necesita). No creo que los porcentajes den un mejor control que ems; no hay nada que lo detenga especificando en centésimas de ems (0.01 em) y el navegador interpretará como le parezca.

¿Hay un área de la especificación CSS que cubre esto?

Ninguno, por lo que recuerdo, em y% fueron diseñados para tamaños de fuente solo en CSS 1.0.

Answer 2

Aquí hay un código de ejemplo. Creo que esto es lo que estás buscando. Lo siguiente muestra exactamente lo mismo en Firefox 3 (mac) e IE7.

#absdiv {
  position: absolute; 
  left: 100px; 
  top: 100px; 
  width: 80%; 
  height: 60%; 
  background: #999;
}

#pctchild {
  width: 60%; 
  height: 40%; 
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}

<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>

Answer 3

Creo que esto tiene algo que ver con la forma en que se implementa la propiedad hasLayout en el navegador anterior.

¿Has probado tu código en IE8 para ver si también funciona allí? IE8 tiene un depurador ( F12 ) y también puede ejecutarse en modo IE7.

Answer 4

El div necesita tener un ancho definido:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

Answer 5

El div padre debe tener un width definido, ya sea en píxeles o como un porcentaje. En Internet Explorer 7, la div principal necesita un width definido para que las divisiones porcentuales secundarias funcionen correctamente.

Answer 6

IE antes de 8 tiene un aspecto temporal en su modelo de caja que notablemente crea un problema con los anchos basados ​​en porcentaje. En su caso aquí un div absolutamente posicionado por defecto no tiene ancho. Su ancho se calculará en función del ancho de píxel de su contenido y se calculará una vez que el contenido se haya procesado. Así que en el punto en el que IE se encuentra y presenta su división relativamente posicionada, su padre tiene un ancho de 0, por lo que se colapsa en 0.

Si desea una discusión más profunda de esto junto con muchos ejemplos prácticos here eche un vistazo here .