IE7 float right problems

Question

IE7 float right problems

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>

Mam problemy z IE7 (obsługa IE6 nie jest potrzebna)

Na IE7 renderowany html wygląda tak=>

Muszę to tak wyglądać (działa na chrome / ie8 w tej chwili)=>

Co powinienem zmienić? :)

49

css internet-explorer internet-explorer-7

Author: Glorfindel, 2009-11-30

Source

3 answers

Zawsze pomocny dla wszystkich IE-Float-Combo: daj każdemu float-elementowi display: inline;

1

Author: Martin Labuschin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-03 09:09:33

Spróbuj wyczyścić po poprawce:

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

0

Author: Lark,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-30 14:20:34

score 97 · Accepted Answer

Musisz unosić oba elementy i wyczyścić je.

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

Lub po prostu umieść element pływający przed elementem normalnym w następujący sposób:

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

Krótkie Wyjaśnienie:

Pardon my english and drawing, but here ' s skrótowo jak float and clearing działa w cross browser:

Element może być unoszony w lewo lub w prawo. Gdy element jest pływający, element nie przesuwa "normalnej" zawartości w dół. Zobacz dlaczego -

Float i "clear": {]}

alt text
Legenda: pomarańczowy / Prawy pływak, Niebieski / Lewy pływak, szare linie/przezroczysty dzielnik, Czerwony Rect/granice

W tym przypadku masz 2 elementy jednego tekstu liniowego - jeden float w lewo, a drugi w prawo. Podczas unoszenia się nie popycha zawartości w dół, czyli zajmuje miejsce. Tak więc, jeśli nie użyjesz clear:both w szarych liniach, zawartość poniżej ułoży się w górę między 2 elementami pływającymi, a tym samym może nie być tym, czego chcesz.

Kiedy używasz clear:both poniżej pływaki, zawartość poniżej pływaków zostanie przesunięta tak daleko, jak element pływak jest najwyższej wysokości. Jest to pokazane na diagramie 2nd i 3rd sekcji.

Float only:

alt text
Legenda: pomarańczowy / Float Right, Niebieski/Normal content, szare linie/linia dzielona z następnym, Czerwonym Rect/bounds

Niebieska normalna zawartość jest już domyślnie text-align: left;. W ten sposób jest zorientowany na lewo. Potrzebujesz platformy, aby być przed normalną treścią, ponieważ jesteś nakazuje przeglądarce wypłynąć z tej linii.

Powinieneś eksperymentować w różnych warunkach, aby zobaczyć jego efekt: umieszczenie float z przodu, z tyłu, float w lewo w prawo, Wyczyść oba, Wyczyść prawo i lewo.