IE7 flutuar problemas certos
-
10-07-2019 - |
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 =>
Eu preciso disso para ficar assim (funciona em cromo / IE8 no momento) =>
O que devo mudar? :)
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:
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:
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;
}