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

Question

Tengo un div absolutamente posicionado que contiene varios elementos secundarios, uno de los cuales es un div relativamente posicionado. Cuando uso un ancho porcentual basado en en el hijo div, se contrae a '0' ancho en Internet Explorer 7, pero no en Firefox o Safari.

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

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

Answer 1

El padre div necesita tener un width definido, ya sea en píxeles o como un porcentaje. En Internet   Explorer   7, el elemento primario div necesita un width definido para el porcentaje div s infantil para que funcione correctamente.

Answer 2

Aquí hay algunos ejemplos de código. 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

IE antes de 8 tiene un aspecto temporal a su modelo de caja que más notablemente crea un problema con anchos basados ​​porcentuales. En su caso aquí, un div absolutamente posicionado no tiene ancho. Su ancho se calculará en función del ancho de píxel de su contenido y se calculará una vez que se hayan procesado los contenidos. Entonces, en el momento en que IE encuentra y coloca su posición relativamente div, su matriz tiene un ancho de 0, por lo que se colapsa a 0.

Si desea una discusión más profunda de esto junto con muchos ejemplos de trabajo, tenga un ganso here.

Answer 4

Por qué no funciona el niño anchura porcentaje en el trabajo de los padres con posición absoluta en IE7?

Debido a que no hay Internet Exploder

Hay algo que me falta aquí?

Esto es, para aumentar la conciencia de su compañero de trabajo de que IE es una mierda.

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

Uso em unidades ya que son más útiles cuando la creación de diseños líquidos como se puede utilizar para el relleno y márgenes, así como los tamaños de fuente. De modo que su espacio en blanco crece y se reduce proporcionalmente a su texto si se lo cambia de tamaño (que es realmente lo que necesita). No creo que los porcentajes den un control más fino que el ccsme; no hay nada que le impida especificar en centésimas de ems (0.01 em) y el navegador lo interpretará como lo considere oportuno.

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

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

Answer 5

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

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