IE7 problemas de flotación correcta

StackOverflow https://stackoverflow.com/questions/1820007

Pregunta

Html = > 

<!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"> 
<head>
</head>
<body>
  <div style='border: 1px solid red; width: 100px;'>
    <a href="#">foo</a>
    <a href="#"style="border-color: blue; float: right;">bar</a>                
  </div>
something
</body>
</html>

Tengo problemas con IE7 (no se necesita soporte para IE6)

En IE7, html procesado se ve así = >
texto alternativo ??

Necesito que se vea así (funciona en Chrome / ie8 en este momento) = >
texto alternativo ??

¿Qué debo cambiar? :)

¿Fue útil?

Solución

Necesita flotar ambos elementos y borrarlo. 

<!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"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#" style="float:left;">foo</a>            
    <div style="clear:both;"></div>
  </div>
something
</body>
</html>

O simplemente coloque el elemento flotante frente al elemento normal de esta manera: 

<!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"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#">foo</a>            
  </div>
something
</body>
</html>

Breve explicación:

Disculpe mi inglés y mi dibujo, pero he aquí brevemente cómo funciona flotar y borrar en el navegador cruzado:

Un elemento puede flotar hacia la izquierda o hacia la derecha. Cuando tiene un elemento flotante, el elemento no empuja " normal " contenido hacia abajo. Vea por qué -

Flotar y despejar:

texto alternativo ??
Leyenda: Naranja / Flotar a la derecha, Azul / Flotar a la izquierda, Líneas grises / Divisor claro, Rojo Rect / límites

En este caso, tiene 2 elementos de un texto de línea: uno flotante hacia la izquierda y el otro flotante hacia la derecha. Al flotar, no empujará el contenido hacia abajo, es decir, ocupará espacio. Por lo tanto, si no utiliza clear: both en las líneas grises, el contenido a continuación se apilará hacia arriba entre los 2 elementos flotantes y, por lo tanto, puede no ser lo que desea.

Cuando utiliza clear: ambos debajo de los flotadores, el contenido debajo de los flotadores se empujará hasta el elemento flotante que tenga la altura más alta. Esto se muestra en la segunda y tercera sección del diagrama.

Solo flotante:

texto alternativo ??
Leyenda: Naranja / Flotar a la derecha, Azul / Contenido normal, Líneas grises / la línea que se divide con el siguiente, Rojo Rect / límites

El contenido azul normal ya es por defecto text-align: left; . Así queda orientado. Necesita que el flotador esté delante del contenido normal porque le está diciendo al navegador que flote desde esta línea.

Debería experimentar diferentes condiciones para ver su efecto: poner el flotador al frente, detrás, flotar a la izquierda a la derecha, borrar ambos, borrar a la derecha y a la izquierda.

Otros consejos

Siempre útil para todos los IE-Float-Combos: Dé a cada elemento flotante una pantalla : en línea;

Pruebe la solución clear after after: 

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top