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

votos
249

Tengo una posición absoluta que divcontiene varios niños, uno de los cuales está relativamente posicionado div. Cuando uso un ancho basado en porcentaje en el elemento secundario div, colapsa a '0' ancho en Internet Explorer 7 , pero no en Firefox o Safari.

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

  1. ¿Hay algo que me falta aquí?
  2. ¿Existe 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 cubra esto?
Publicado el 31/07/2008 a las 23:08
fuente por usuario
En otros idiomas...                            


6 respuestas

votos
129

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 de hijo definido para divque funcione correctamente.

Respondida el 01/08/2008 a las 13:22
fuente por usuario

votos
53

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>

Respondida el 05/08/2008 a las 06:54
fuente por usuario

votos
34

IE anterior a 8 tiene un aspecto temporal en su modelo de caja que más notablemente crea un problema con los anchos basados ​​en porcentaje. En este caso, una posición absolutamente divpredeterminada 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 divsu posición relativamente, su elemento principal tiene un ancho de 0, por lo tanto, por qué se colapsa a sí mismo.

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

Respondida el 04/09/2008 a las 10:02
fuente por usuario

votos
30

¿Por qué no funciona el porcentaje de ancho del elemento secundario en el elemento primario posicionado en IE7?

Porque es Internet Explorer

¿Hay algo que me falta aquí?

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

¿Existe 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 cuando se crean diseños de líquidos, ya que puede usarlos para relleno y márgenes, así como para 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 CSS que cubra esto?

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

Respondida el 13/05/2009 a las 08:47
fuente por usuario

votos
28

Creo que esto tiene algo que ver con la forma en que la hasLayoutpropiedad se implementa en el navegador más antiguo.

¿Has probado el código en Internet Explorer 8 para ver si funciona en allí, también? IE8 tiene un depurador ( F12) y también puede funcionar en modo IE7.

Respondida el 22/10/2010 a las 17:21
fuente por usuario

votos
1

Los divnecesita tener una anchura definida:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
Respondida el 07/09/2018 a las 14:53
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more