Internet Explorer 6 y 7: los elementos flotados se expanden hasta el 100% de ancho cuando contienen un elemento secundario flotando a la derecha. ¿Hay alguna solución?

Tengo un padre div flotado a la izquierda, con dos hijos div s que necesito flotar a la derecha.Internet Explorer 6 y 7: los elementos flotados se expanden hasta el 100% de ancho cuando contienen un elemento secundario flotando a la derecha. ¿Hay alguna solución?

El padre div debe (si entiendo la especificación correctamente) ser tan ancho como sea necesario para contener el niño div s, y así es como se comporta en Firefox et al.

En IE, la matriz div se expande al ancho del 100%. Esto parece ser un problema con los elementos flotados que tienen hijos flotando a la derecha. página de prueba:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

<head> 
<title>Float test</title> 
</head> 

<body> 
<div style="border-top:solid 10px #0c0;float:left;"> 
    <div style="border-top:solid 10px #00c;float:right;">Tester 1</div> 
    <div style="border-top:solid 10px #c0c;float:right;">Tester 2</div> 
</div> 
</body> 

</html>

Por desgracia, no puede fijar la anchura de los niños div s, por lo que no se puede establecer un ancho fijo en la matriz.

¿Hay una solución de solo CSS para hacer que el padre div sea tan ancho como el hijo div s?

Fuente

2009-05-12 Paul D. Waite

aquí hay un muy buen ejemplo de lo que es el problema: http://css-class.com/test/css/visformatting/floats/floats-width-auto.htm –

Ooh sí, buena página de prueba. –

he aquí una solución que hace inline-block trabajo en IE6 como en http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ para que los elementos se comportan más como flotante a la derecha <div>s:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 

<title>Float with inline-block test</title> 

<style type="text/css"> 
    .container { 
     border-top: solid 10px green; 
     float: left; 
    } 

    .tester1, 
    .tester2 { 
     float: right; 
    } 

    .tester1 { 
     border-top: solid 10px blue; 
    } 

    .tester2 { 
     border-top: solid 10px purple; 
    } 
</style> 

<!--[if lte IE 7]> 
<style type="text/css"> 
    .container { 
     text-align: right; 
    } 

    .tester1, 
    .tester2 { 
     float: none; 
     zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */ 
    } 
</style> 
<![endif]--> 

</head> 

<body> 
<div class="container"> 
    <div class="tester1">Tester 1</div> 
    <div class="tester2">Tester 2</div> 
</div> 
</body> 
</html>

Fuente

2010-05-04 06:21:44 cryo

Aha! Sí, muy buena idea: 'inline-block' es una imitación más cercana de los flotadores. Aún nos queda el problema del pedido, pero a menos que nos falte algo, no hay manera de evitarlo. ¡Ganador! –

Ah, también uso comentarios condicionales para que el código para arreglar IE 7 y 6 solo se aplique en IE 7 y 6. He reescrito su ejemplo en consecuencia. Esto evita problemas con 'inline-block' en Firefox 2, y significa que todas las IEs posteriores a 7 obtienen el código apropiado basado en' float '. –

Bastante, intenté agregar 'float: right' a los DIV de prueba y' inline-block' al contenedor, pero eso no funcionó en IE6 - parece que flotación correcta hizo que los elementos tengan un ancho del 100% pase lo que pase. Oh, bueno, al menos el efecto es posible de todos modos :-P – cryo

No pude encontrar una solución de CSS que se adapte a sus necesidades, pero si desea utilizar una solución de JavaScript, ¿puede ser útil el siguiente código? No modifiqué el estilo de los divs, solo agregué los ID main, sub1 y sub2 a sus divs.

var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth; 
document.getElementById('main').style.width = myWidth;

Fuente

2009-05-12 10:49:02 Daan

Claro, eso debería funcionar JavaScript-sabia, aunque, si iba por el camino de JavaScript, probablemente comprobar si la escritura IE7 Dean Edwards fija este tema en particular (que corrige un montón de otros). –

¿Qué pasa con el uso de una sola celda en lugar de la tabla div? Es posible que necesite un poco más de trabajo para tener todo alineado correctamente, pero la tabla no se expande.

Fuente

2009-05-12 11:01:13

Desafortunadamente, la tabla parece forzar a los divs hijos a envolver, por lo que están uno encima del otro en lugar de lado a lado. –

OK, ¿qué hay de las tablas anidadas? La tabla externa tiene float: izquierda y una celda. En esa celda hay una tabla interna con flotador: derecha y dos celdas. En cada una de las dos celdas está el contenido de sus dos div interiores. Es más complicado que solo los divs, pero funciona (en mi XP/IE7, al menos). –

Ah, logre el diseño horizontal de los divs secundarios con una tabla. Definitivamente una posibilidad, aunque técnicamente no se supone que uses tablas para el diseño (creo que si fallas una Pauta de Accesibilidad al Contenido Web). Además, esto es en realidad para un sitio que tiene dos diseños: uno de izquierda a derecha y otro de derecha a izquierda. Lo ideal es que no modifiquemos el HTML de los diseños (más allá de tener una clase que indique qué diseño está en uso) y el uso de tablas pondría fin a eso. –

algo que podría comenzar con esto es:

<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;"> 
<DIV style="BORDER: #00c 10px solid;FLOAT: right;"> 
Tester 1 
</DIV> 
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;"> 
Tester 2 
</DIV> 
</DIV>

El resultado de esa parece ser, al menos, en el estadio de lo que estás buscando. Obviamente, desearía ajustarlo para sus necesidades, y probablemente agregar alguna lógica css para aplicarlo solo al navegador < IE 7.

Si eso no es exactamente lo que está buscando, intente jugar con algunos márgenes negativos .

Fuente

2009-05-13 16:24:31

Lamentablemente, eso no parece funcionar en mi página de prueba: la envoltura de div infantil, por lo que están una encima de la otra en lugar de una al lado de la otra. Además, al menos en IE 7, el margen del 100% ocupa todo el espacio disponible, por lo que el div principal se coloca fuera de su principal. –

¿Qué pasa con las tapas? –

A veces IE 6 no oye correctamente a menos que grites. –

En primer lugar, ¿por qué no usa estilos en línea?

que haría uso de este para dirigirse IE con un archivo css separada:

<!--[if lt IE 7]> 
<link rel="stylesheet" href="ie6.css" type="text/css" /> 
<![endif]-->

Sé que esto no es una pregunta directa, pero IE es siempre un dolor de tratar de! La mayoría de los diseñadores/desarrolladores que conozco crearán una hoja de estilo totalmente nueva para IE.

Fuente

2009-05-14 23:19:56

Sí, lo siento: el código anterior es sólo código de ejemplo para poner de relieve el error. Utilicé estilos en línea para facilitar un poco lo que está sucediendo. –

Se me ocurrió una solución usando text-align: right y display: inline.

Prueba esto:

<div style="border-top:solid 10px #0c0; float: left;"> 
    <div style="margin-top: 10px; text-align: right;"> 
     <div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div> 
     <div style="border-top:solid 10px #00c; display: inline;">Tester 1</div> 
    </div> 
</div>

Aviso I tuvo que cambiar el orden de las cajas de "prueba" en el marcado a aparecer en la misma forma que tu ejemplo. Creo que hay una alternativa que margin-top en el nuevo contenedor, pero no tengo tiempo para investigar en este momento.

Si quieres un estilo más limpio para todos los demás navegadores probar esto:

<div style="border-top:solid 10px #0c0; float: left;"> 
    <div style="float: right;"> 
     <div style="border-top:solid 10px #c0c; float: left;">Tester 2</div> 
     <div style="border-top:solid 10px #00c; float: left;">Tester 1</div> 
    </div> 
</div>

Hay algunos problemas diferentes que pueden surgir cuando se quiere a la disposición materia alrededor de esas cajas. Sin embargo, creo que esos problemas serán mucho más fáciles de resolver que este.

la esperanza que esto era útil para usted.

Fuente

2009-05-15 13:46:47 kaba

Es posible que desee utilizar 'inline-block' en lugar de' inline'. –

inline-block no funciona en IE6 – meo

@meo: no, no lo hace, pero puede ser emulado con algunas advertencias: http://foohack.com/2007/11/cross-browser-support-for- inline-block-styling/ – cryo

Un poco limpia, pero un CSS única solución que funciona bien en IE, cromo y FF.

Tomé solución de Kaba - pero el problema era, funciona bien en IE pero todos los otros navegadores muestran un espacio de 4 píxeles entre los 2 divs niño. El espacio permanece como 4px incluso si el contenido en ambos divs se expande. Entonces, para arreglar eso, he usado declaraciones condicionales de IE. No me veo como el mejor código del mundo, pero hace el trabajo bien.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

<head> 
<title>Float test</title> 
</head> 

<body> 
<div style="border-top:solid 10px #0c0; float: left;"> 

    <div style="border-top:solid 10px #00c; text-align: right;"> 
     <div style="border-top:solid 10px #c0c; display: inline;">Tester2</div> 

     <div style="border-top:solid 10px #00c; display: inline;margin-left:-4px"> 

     <!--[if gte IE 5]> 
     <div style="border-top:solid 10px #00c; display: inline;margin-left:4px"> 
     <![endif]--> 

     Tester1 

     <!--[if gte IE 5]> 
     </div> 
     <![endif]--> 


     </div> 

    </div> 
</div> 
</body> 
</html>

Fuente

2010-05-04 05:11:35 DMin

Veo a dónde vas; Sin embargo, creo que prefiero la solución 'inline-block' para IE, ya que se trata del problema de espacio sin la necesidad de márgenes negativos. –

que tenían el mismo problema y resuelve de situando el niño elemento (que quería flotar a la derecha) con posición: absoluta y derecha: 0. Le di al elemento primario el relleno correcto para hacer espacio para el elemento secundario ... ¡Vale la pena intentarlo, podría no funcionar en todas las aplicaciones!

Fuente

2012-04-02 13:20:53 evilunix

Claro, esa es otra solución. Funciona bien si sabe qué tan ancho será el elemento secundario. –

Internet Explorer 6 y 7: los elementos flotados se expanden hasta el 100% de ancho cuando contienen un elemento secundario flotando a la derecha. ¿Hay alguna solución?

Respuesta

Cuestiones relacionadas