IE7 ha problemi con il galleggiante

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

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 = > alt text

Ho bisogno che assomigli a questo (al momento funziona su chrome / ie8) = >
alt text

Cosa devo cambiare? :)

È stato utile?

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:

alt text
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:

alt text
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;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top