¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7? -- html campo con css campo con internet-explorer-7 camp Relacionados El problema

Why did the width collapse in the percentage width child element in an absolutely positioned parent on Internet Explorer 7?


303
vote

problema

Español

Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , se colapsa en Form2 en IE7, pero no en Firefox o Safari.

Si uso Form3 , funciona. Si el padre está relativamente posicionado, el ancho porcentual en el niño trabaja.

  1. ¿Hay algo que me estoy perdiendo aquí?
  2. ¿Hay una solución fácil para esto, además del Form4 en el niño?
  3. ¿Hay un área de la especificación CSS que cubra esto?
Original en ingles

I have an absolutely positioned div containing several children, one of which is a relatively positioned div. When I use a percentage-based width on the child div, it collapses to 0 width on IE7, but not on Firefox or Safari.

If I use pixel width, it works. If the parent is relatively positioned, the percentage width on the child works.

  1. Is there something I'm missing here?
  2. Is there an easy fix for this besides the pixel-based width on the child?
  3. Is there an area of the CSS specification that covers this?
</div
        

Lista de respuestas

151
 
vote
vote
La mejor respuesta
 

El padre Form.Opacity1 debe tener un double trans = trackbar1.Value / 5000; 22 definido , ya sea en píxeles o como porcentaje. En Internet Explorer 7, el padre Form.Opacity3 necesita un double trans = trackbar1.Value / 5000; 24 definido para el porcentaje de niños Form.Opacity5 s para funcionar correctamente.

 

The parent div needs to have a defined width, either in pixels or as a percentage. In Internet Explorer 7, the parent div needs a defined width for child percentage divs to work correctly.

</div
 
 
63
 
vote

Aquí hay un código de muestra. Creo que esto es lo que estás buscando. El siguiente código muestra exactamente lo mismo en Firefox 3 (Mac) y IE7.

  Form.Opacity6   
  Form.Opacity7  
 

Here is a sample code. I think this is what you are looking for. The following code displays exactly the same in Firefox 3 (mac) and 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>
</div
 
 
40
 
vote

es decir, antes de 8 tiene un aspecto temporal a su modelo de caja que crea especialmente un problema con los anchos basados ​​en porcentaje. En su caso, aquí se posicionó absolutamente Form.Opacity8 de forma predeterminada no tiene un ancho. Su ancho se resolverá según el ancho de píxeles de su contenido y se calculará después de que se presten los contenidos. Por lo tanto, en el punto, es decir, encuentra y hace que su padre sea relativamente posicionado su padre tiene un ancho de 0 por lo tanto, por lo que se derrumba en 0.

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

 

IE prior to 8 has a temporal aspect to its box model that most notably creates a problem with percentage-based widths. In your case here an absolutely positioned div by default has no width. Its width will be worked out based on the pixel width of its content and will be calculated after the contents are rendered. So at the point, IE encounters and renders your relatively positioned div its parent has a width of 0 hence why it itself collapses to 0.

If you would like a more in-depth discussion of this along with lots of working examples, have a gander here.

</div
 
 
37
 
vote

¿Por qué no el porcentaje de ancho niño? en el trabajo de los padres absolutamente posicionado en IE7?

porque es Internet Explorer.

¿Hay algo que me estoy perdiendo aquí?

es decir, para aumentar la conciencia de sus compañeros de trabajo / clientes que, es decir, no es bueno.

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

Utilice em Las unidades, ya que son más útiles cuando se crean 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 blanco crece y se encoge proporcionalmente a su texto si se redondea (que es realmente lo que necesita). No creo que los porcentajes dan un control más fino que EMS; No hay nada que detenerlo especificando en centésimas de EMS (0,01 EM) y el navegador interpretará a medida que se le convenga.

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

Ninguno, por lo que recuerdo em 'S y el%' s Estado destinado a los tamaños de fuente solo en CSS 1.0.

 

Why doesn’t the percentage width child in absolutely positioned parent work in IE7?

Because it's Internet Explorer.

Is there something I'm missing here?

That is, to raise your co-workers' / clients' awareness that IE is not good.

Is there an easy fix besides the pixel-based width on the child?

Use em units as they are more useful when creating liquid layouts as you can use them for padding and margins as well as font sizes. So your white space grows and shrinks proportionally to your text if it is resized (which is really what you need). I don't think percentages give a finer control than ems; there's nothing to stop you specifying in hundredths of ems (0.01 em) and the browser will interpret as it sees fit.

Is there an area of the CSS specification that covers this?

None, as far as I remember em's and %'s were intended for font sizes alone back at CSS 1.0.

</div
 
 
34
 
vote

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

¿Ha intentado su código en IE8 para ver si también funciona allí? IE8 tiene un depurador ( f12 ) y también puede ejecutarse en el modo IE7.

 

I think this has something to do with the way the hasLayout property is implemented in the older browser.

Have you tried your code in IE8 to see if works in there, too? IE8 has a Debugger (F12) and can also run in IE7 mode.

</div
 
 
3
 
vote

El div necesita tener un ancho definido:

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

The div needs to have a defined width:

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

La etiqueta <div>5 no tiene ningún ancho especificado. UTILICE PARA EL NIÑO <div> Etiquetas, podría ser porcentaje o píxel, pero sea lo que sea, debe vincularse a sus posiciones apropiadas:

  <div id="MainDiv" style="width:60%;">     <div id="Div1">         ...     </div>     <div id="Div2">         ...     </div>     ... </div>   
 

The parent <div> tag doesn't have any width specified. Use it for the child <div> tags, it could be percentage or pixel, but whatever it would be,it should link to its appropriate positions:

<div id="MainDiv" style="width:60%;">     <div id="Div1">         ...     </div>     <div id="Div2">         ...     </div>     ... </div> 
</div
 
 

Relacionados problema

13  ¿Cómo evitar que las barras de desplazamiento superpongan el contenido?  ( How to prevent scrollbars from overlapping the content ) 
Tengo un bloque de código preformateado (& lt; pre & gt;) que se desborda horizontalmente, por lo que hay una barra de desplazamiento horizontal para permitir...

1  Flotando demasiado lejos  ( Floating too far right ) 
Tengo una aplicación web de administración de registros que muestra un registro maestro en una pantalla y Ajaxes editores diseñados dinámicamente en un DIV de...

3  El evento de ONRESIZE del cuerpo no dispara en IE7 cuando la página es parte de un adorno y redimensionado verticalmente  ( Body onresize event does not fire in ie7 when page is part of a frameset and res ) 
Tengo un refrán simple con dos marcos verticalmente, es decir, dos filas: La primera fila contiene un encabezado fijo. La segunda fila contiene una barra ...

1  Barra de desplazamiento horizontal no deseado en IE7  ( Unwanted horizontal scroll bar in ie7 ) 
Tengo un sitio que está funcionando bien, excepto en IE7 hay una barra de desplazamiento horizontal masiva. Tendría que pegar todo el código HTML y el cód...

0  Problemas con jQuery Galleria e IE7  ( Problems with jquery galleria and ie7 ) 
Tengo un problema que no puedo averiguar qué hacer a continuación. Tengo un sitio web que usa JQUERY GALLEERIA en una página HTML y 10 imágenes de reproducció...

0  IE7 CSS Hover problema  ( Ie7 css hover issue ) 
He creado dos menús, una desplegable horizontal y un menú vertical, ambos trabajan bien en IE8, Chrome y Firefox, pero estoy obteniendo un problema extraño en...

0  Anclaje a nivel de bloque que no ocupa espacio alrededor del texto [IE7]  ( Block level anchor not taking up space around text ie7 ) 
Tengo una etiqueta de anclaje con algunos CSS simple: div { background-color: gray; /* for debugging */ } div a { display: block; padding: 6px 4px 6...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

7  Colspan en IE7 / 8 no respetado  ( Colspan in ie7 8 not respected ) 
El DOM se ve así: <table> <tr> <td>a</td>...<td>g</td> </tr> <tr> <td colspan="3"> <table> ... </table> </td> </tr>...

0  IE7 matando al estilo de lista en UL flotado  ( Ie7 killing list style on floated uls ) 
Tengo dos uu (.listone y .listtwo respetuosamente) flotó a la izquierda y la otra derecha. El estilo de lista: Círculo; trabaja en cada navegador, excepto IE7...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos