Elemento secundario de ancho porcentual en el padre absolutamente posicionado en Internet Explorer 7
Tengo un div
absolutamente posicionado que contiene varios hijos, uno de los cuales es un div
relativamente posicionado. Cuando uso un ancho basado en porcentajes en el hijo div
, se contrae a '0' ancho en Internet Explorer 7, pero no en Firefox o Safari.
Si utilizo pixel width, funciona. Si el padre está relativamente posicionado, el ancho porcentual en el hijo funciona.
- ¿Hay algo que me estoy perdiendo aquí?
- hay un fácil arreglo para esto además del ancho basado en píxeles en el ¿niño?
- ¿Hay un área de la especificación CSS que cubra esto?
6 answers
El padre div
necesita tener un width
definido, ya sea en píxeles o como porcentaje. En Internet Explorer 7, el padre div
necesita un width
definido para que el porcentaje hijo div
s funcione correctamente.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-19 06:10:52
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-22 15:34:49
IE antes de 8 tiene un aspecto temporal a su modelo de caja que más notablemente crea un problema con los anchos basados en porcentajes. En su caso aquí un div
absolutamente posicionado por defecto no tiene ancho. Su ancho se calculará en función del ancho de píxel de su contenido y se calculará después de que se procesen los contenidos. Así que en el punto IE encuentra y hace su relativamente posicionado div
su padre tiene un ancho de 0 por lo tanto por qué se colapsa a 0.
Si desea una más en profundidad la discusión de esto junto con un montón de ejemplos de trabajo, tienen un vistazo aquí.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-14 11:56:10
¿Por qué no el hijo de ancho porcentual en absolutamente posicionado trabajo de los padres en IE7?
Porque es Internet Exploder
¿Hay algo que me estoy perdiendo aquí?
Es decir, para aumentar la conciencia de su compañero 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?
Use em
unidades, ya que son más útiles al crear diseños líquidos, ya que puede usarlos para el relleno y márgenes, así como tamaños de fuente. Por lo tanto, su espacio en blanco crece y se reduce proporcionalmente a su texto si se redimensiona (que es realmente lo que necesita). No creo que los porcentajes den un control más fino que ems; no hay nada que le impida especificar en centésimas de ems (0.01 em) y el navegador interpretará como considere oportuno.
¿Hay un área de la especificación CSS que cubra esto?
Ninguno, por lo que recuerdo em
's y %' s estaban destinados a tamaños de fuente solo de vuelta en CSS 1.0.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-08 16:07:51
Creo que esto tiene algo que ver con la forma en que la propiedad hasLayout
se implementa en el navegador anterior.
¿Ha intentado su código en IE8 para ver si funciona allí, también? IE8 tiene un depurador (F12) y también puede ejecutarse en modo IE7.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-22 15:34:01
El div necesita tener un ancho definido
<div id="parent" style="width:230px;">
<div id="child1"></div>
<div id="child2"></div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-07 14:53:02