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

Question

tengo una absolutamente posicionada div que contiene varios niños, uno de los cuales es un relativamente posicionado div.Cuando uso un ancho basado en porcentaje en el niño div, se colapsa al ancho '0' en Internet Explorer 7, pero no en Firefox o Safari.

si uso ancho de píxel, funciona.Si el padre está en una posición relativa, el porcentaje de ancho del hijo funciona.

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

Answer 1

El padre div necesita tener un definido width, ya sea en píxeles o como porcentaje.En Internet Explorer 7, el padre div necesita un definido width para porcentaje de niños divs para funcionar correctamente.

Answer 2

Aquí hay un código de muestra.Creo que esto es lo que estás buscando.Lo siguiente se muestra exactamente igual 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 anterior a 8 tiene un aspecto temporal en su modelo de caja que crea más notablemente un problema con anchos basados ​​en porcentajes.En su caso aquí un absolutamente posicionado div por defecto no tiene ancho.Su ancho se calculará en función del ancho de píxeles de su contenido y se calculará después de que se representen los contenidos.Entonces, en el momento en que IE encuentra y presenta su posición relativamente posicionada div su padre tiene un ancho de 0, por eso se colapsa a 0.

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

Answer 4

¿Por qué el niño porcentual de ancho no trabaja en los padres absolutamente posicionados en IE7?

Porque es Internet Exploder

¿Hay algo que me falta aquí?

Es decir, para concienciar a sus compañeros de trabajo/clientes de que IE apesta.

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

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

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

Ninguno, que yo recuerde em's y % estaban destinados únicamente a tamaños de fuente en CSS 1.0.

Answer 5

Creo que esto tiene algo que ver con la forma en que hasLayout La propiedad se implementa 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 6

El div necesita tener un ancho definido:

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