IE7 flutuar problemas certos

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

Pergunta

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>

Eu tenho problemas com o IE7 (suporte IE6 não é necessária)

No IE7 prestados olhares html como este =>
text alt

Eu preciso disso para ficar assim (funciona em cromo / IE8 no momento) =>
text alt

O que devo mudar? :)

Foi útil?

Solução

Você precisa flutuar ambos os elementos e limpá-la. 

<!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>

Ou simplesmente colocar o elemento flutuando na frente do elemento normal como esta: 

<!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 Explicação:

Pardon meu Inglês e desenho, mas está aqui brevemente como flutuador e de compensação obras em cross browser:

Um elemento pode ser lançada para a esquerda ou direita. Quando você tem elemento flutuante, o elemento não empurrar para baixo conteúdo "normais". Veja por que -

Float e clara:

text alt
Legenda: Laranja / Float direito, Azul / Float Esquerda, linhas cinzentas / Clear divisor, Red Rect / limites

Neste caso, você tem 2 elementos de texto uma linha - um flutuador esquerda, eo outro direito float. Quando flutuante, não vai empurrar o conteúdo para baixo aka tomando espaço. Assim, se você não usar clear:both nas linhas cinzentas, o conteúdo abaixo serão empilhados para cima entre os 2 elementos flutuantes e, portanto, não pode ser o que quiser.

Quando você usa clear:both abaixo dos carros alegóricos, o conteúdo abaixo os carros alegóricos será empurrada tão longe quanto qualquer elemento float é de maior altura. Isso é mostrado na seção 2 e 3 do diagrama.

Float apenas:

text alt
Legenda: Laranja / Float direito, Azul / Conteúdo normal, linhas cinzentas / a linha que está divded com o próximo, Red Rect / limites

O teor normal de azul já está por text-align: left; padrão. Assim está esquerdo orientada. Você precisa do flutuador de estar na frente do conteúdo normal, porque você está dizendo o navegador para flutuar a partir desta linha.

Você deve experimentar diferentes condições de ver o seu efeito:. Colocando bóia na frente, atrás, flutuador da esquerda à direita, limpar ambos, direito líquido e deixou

Outras dicas

Sempre útil para todos IE-Float-Combos: Dê a cada bóia-elemento a display: inline;

Tente o claro após correção: 

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top