css - online - IE7 flotan problemas correctos
check html5 (3)
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 explicacion:
Perdón por mi inglés y dibujo, pero aquí está brevemente cómo funciona la flotación y el borrado en el navegador cruzado:
Un elemento se puede flotar a la izquierda o a la derecha. Cuando tiene elemento flotante, el elemento no empuja el contenido "normal" hacia abajo. Ver por qué -
Flotador y claro:
Leyenda: naranja / flotante derecha, azul / flotante izquierda, líneas grises / divisor transparente, rojo rectificación / límites
En este caso, tiene 2 elementos de texto de una línea: un flotador a la izquierda y el otro a la derecha. Al flotar, no empujará el contenido hacia abajo, también conocido como tomar espacio. Por lo tanto, si no usa 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 use clear:both debajo de los flotadores, el contenido debajo de los flotadores se empujará tanto como el elemento flotante que tenga la mayor altura. Esto se muestra en la segunda y tercera sección del diagrama.
Float solo:
Leyenda: Naranja / Flotante derecha, Azul / Contenido normal, Líneas grises / la línea que se divide con la siguiente, Rect / límites rojos
El contenido normal azul ya está predeterminado por text-align: left; . Por lo tanto, se deja orientado. Necesita que el flotador esté delante del contenido normal porque le está diciendo al navegador que flote desde esta línea.
Debes experimentar diferentes condiciones para ver su efecto: colocando flotador en el frente, atrás, flotar a la izquierda, despejar ambos, despejar a la derecha e izquierda.
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 IE6)
En IE7 renderizado html se ve así =
texto alternativo http://i48.tinypic.com/saxs9d.jpg
Necesito que se vea así (funciona en Chrome / ie8 en este momento) =>
texto alternativo http://i49.tinypic.com/2ufgbr4.jpg
¿Qué debería cambiar? :)
Prueba el claro después de la corrección:
div:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
Siempre es útil para todos los IE-Float-Combos: otorgue a cada elemento flotante una "pantalla: en línea";