IE7 problemas de flotación correcta
-
10-07-2019 - |
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í = >
??
Necesito que se vea así (funciona en Chrome / ie8 en este momento) = >
??
¿Qué debo cambiar? :)
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:
??
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:
??
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;
}