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

Tengo una posición absoluta que divcontiene varios niños, uno de los cuales está relativamente posicionado div. Cuando uso un percentage-based widthen el niño div, se contrae 0 widthen IE7, pero no en Firefox o Safari.

Si lo uso pixel width, funciona. Si el padre está relativamente posicionado, el ancho porcentual del niño funciona.

1. ¿Hay algo que me falta aquí?
2. ¿Hay alguna solución fácil para esto además pixel-based widthdel niño?
3. ¿Hay un área de la especificación CSS que cubra esto?

El padre divdebe tener un definido width, ya sea en píxeles o como un porcentaje. En Internet Explorer 7, el padre divnecesita un widthporcentaje definido para que el niño divs funcione correctamente.

Aquí hay un código de muestra. 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 anterior a 8 tiene un aspecto temporal en su modelo de caja que crea un problema notablemente con anchos basados ​​en porcentajes. En su caso aquí, una posición absolutamente divpredeterminada no tiene ancho. Su ancho se calculará en función del ancho de píxeles de su contenido y se calculará una vez que se hayan procesado los contenidos. Entonces, en ese momento, IE encuentra y presenta su posición relativa, divsu padre tiene un ancho de 0, por lo tanto, por sí mismo colapsa a 0.

Si desea una discusión más profunda de esto junto con muchos ejemplos de trabajo, eche un vistazo aquí .

¿Por qué el porcentaje de ancho hijo en padres absolutamente posicionados no funciona en IE7?

Porque es Internet Explorer

¿Hay algo que me falta aquí?

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

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

Use emunidades, ya que son más útiles al crear diseños líquidos, ya que puede usarlas para rellenar y 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 cambia de tamaño (que es realmente lo que necesita). No creo que los porcentajes den un control más fino que el ems; no hay nada que lo detenga especificando en centésimas de ems (0.01 em) y el navegador interpretará como mejor le parezca.

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

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

Creo que esto tiene algo que ver con la forma en que hasLayoutse implementa la propiedad 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.

La divnecesidad de tener un ancho definido:

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