IE7 ha problemi con il galleggiante
-
10-07-2019 - |
Domanda
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>
Ho avuto problemi con IE7 (non è necessario il supporto IE6)
Su IE7 il rendering dell'html è simile a questo = >
Ho bisogno che assomigli a questo (al momento funziona su chrome / ie8) = >
Cosa devo cambiare? :)
Soluzione
Devi galleggiare entrambi gli elementi e cancellarlo.
<!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 semplicemente metti l'elemento mobile davanti all'elemento normale in questo modo:
<!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 spiegazione:
Perdonate il mio inglese e disegno, ma ecco brevemente come funziona float e clearing nel cross browser:
Un elemento può essere spostato a sinistra oa destra. Quando l'elemento è mobile, l'elemento non spinge " normale " contenuto verso il basso. Scopri perché -
Float e clear:
Legenda: arancione / float a destra, blu / float a sinistra, linee grigie / divisore trasparente, rettangolo rosso / limiti
In questo caso, hai 2 elementi di una riga di testo: uno mobile a sinistra e l'altro mobile a destra. Quando è mobile, non spingerà il contenuto verso il basso, ovvero occupando spazio. Pertanto, se non si utilizza clear: both
sulle linee grigie, i contenuti sottostanti verranno impilati verso l'alto tra i 2 elementi fluttuanti e quindi potrebbero non essere quelli desiderati.
Quando si utilizza clear: entrambi
sotto i float, il contenuto al di sotto dei float verrà spinto nella misura in cui l'elemento float abbia la massima altezza. Questo è mostrato nella seconda e terza sezione del diagramma.
Solo float:
Legenda: arancione / a destra a virgola mobile, contenuto blu / normale, linee grigie / la linea divisa con il successivo, rettangolo rosso / limiti
Il contenuto normale blu è già di default text-align: left;
. Quindi è orientato a sinistra. Hai bisogno che il float sia davanti al normale contenuto perché stai dicendo al browser di fluttuare da questa linea.
Dovresti sperimentare diverse condizioni per vederne l'effetto: mettere il float davanti, dietro, float a sinistra a destra, cancella entrambi, cancella a destra e a sinistra.
Altri suggerimenti
Sempre utile per tutte le combinazioni IE-Float: dai a ogni elemento float un display : inline;
Prova a cancellare dopo la correzione:
div:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}