Elemento secundario de ancho porcentual en el padre absolutamente posicionado en Internet Explorer 7

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>

IE antes de 8 tiene un aspecto temporal a su modelo de caja que más notablemente crea un problema con los anchos basados en porcentajes. 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á después de que se procesen los contenidos. Así que en el punto IE encuentra y hace su relativamente posicionado div su padre tiene un ancho de 0 por lo tanto por qué se colapsa a 0.

Si desea una más en profundidad la discusión de esto junto con un montón de ejemplos de trabajo, tienen un vistazo aquí.

¿Por qué no el hijo de ancho porcentual en absolutamente posicionado trabajo de los padres en IE7?

Porque es Internet Exploder

¿Hay algo que me estoy perdiendo aquí?

Es decir, para aumentar la conciencia de su compañero 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?

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

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

Ninguno, por lo que recuerdo em's y %' s estaban destinados a tamaños de fuente solo de vuelta en CSS 1.0.

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

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

El div necesita tener un ancho definido

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