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




title html definicion (4)

¿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.

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?

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>


El div necesita tener un ancho definido:

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

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.





internet-explorer-7