Problem z układem IE6 - pozycjonowanie bezwzględne

Następujący HTML wygląda tak, jak jest to wymagane w Firefoksie 2 & 3 i IE7. Przycisk Left znajduje się po lewej stronie, przycisk Right znajduje się po prawej stronie, a tekst w środku jest ... w środku!Problem z układem IE6 - pozycjonowanie bezwzględne

Jednak na IE6 przycisk Left jest nieprawidłowo wyrównany - wydaje się wyśrodkowany.

Czy ktoś może sugerować dlaczego?

<!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> 
    <title>Layout problem!</title> 
    <style type="text/css"> 
     DIV#Footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
     } 
     DIV#Footer INPUT 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0px; 
     } 
     DIV#Footer INPUT.right 
     { 
      right: 0px; 
     } 
     DIV#Footer INPUT.left 
     { 
      left: 0px; 
     } 
    </style> 
</head> 
<body> 
    <div id="Footer"> 
     <input class="left" type="button" value="Left" /> 
     Some text in the middle 
     <input class="right" type="button" value="Right" /> 
    </div> 
</body> 
</html>

(I zostały z wykorzystaniem funkcji IE Developer, aby spróbować przeanalizować i rozwiązać ten problem, bezskutecznie ...)

Źródło

2009-02-11 Richard Everett

Musisz wywołać właściwość hasLayout (IE rzeczą ...) z #footer. Szerokość i wysokość wyzwalają, jeśli nie chcesz ustawiać szerokości lub wysokości, możesz użyć właściwości IE-only zoom w CSS.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Layout problem!</title> 
    <style type="text/css"> 
     div#footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
      zoom: 1; 
     } 
     div#footer input 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0; 
     } 
     div#footer input.right 
     { 
      right: 0; 
     } 
     div#footer input.left 
     { 
      left: 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="footer"> 
     <input class="left" type="button" value="Left"> 
     Some text in the middle 
     <input class="right" type="button" value="Right"> 
    </div> 
</body> 
</html>

IIRC, w IE, elementy mają dwa różne zachowania układu, jeden jeśli hasLayout jest true, a inny, czy to false. Upewnienie się, że jest ustawione na true, może naprawić wiele dziwnych problemów z układem, takich jak ten.

Źródło

2009-02-11 17:24:35 nlogax

To jest całkiem peverse! Dzięki Jonas. To działa prawie idealnie - wydaje się przesuwać szerokość mojego zawierającego div o kilka pikseli w IE6. –

Ustawienie powiększenia zmieni kursor. Może chcieć ograniczyć to do IE6 tylko przez poprzedzanie _ do reguły. –

Nie widzę żadnych problemów z zmianą kursora Bjorn –

Twoje płynęły/umieszczone elementy powinny być pierwszym w kolejności przed normalnie wyrównany tekst. Nie ustawiaj ich w kolejności, w jakiej się pojawiają.

Możesz również dodać! Ważne, aby zwiększyć pierwszeństwo, i użyj paska narzędzi programisty przeglądarki Internet Explorer firmy Microsoft, aby zobaczyć, które reguły stają się skuteczne. Jaka jest szerokość elementu nadrzędnego?

Wygląda jednak na to, że powinien po prostu działać.

Źródło

2009-02-11 17:13:00

Dzięki, ale to chyba nie zmienia niczego. Również mogłoby to zepsuć rzeczy dla użytkowników korzystających z czytnika ekranu. –

Spróbuj (odpuszczania styl inline!)

<div id="Footer"> 
    <div style="width:100%"> 
    <input class="left" type="button" value="Left" /> 
    Some text in the middle 
    <input class="right" type="button" value="Right" /> 
    </div> 
    </div>

Źródło

2009-02-11 17:14:36 AJM

Całkiem doskonałe - dzięki AJM! Jednak w IE6 istnieje teraz różnica między 20px między lewym a lewym przyciskiem i krawędzią stopki ... –

zamierzam sugerować trochę przypadkiem do podejścia i sprawdzić, czy masz szczęście z tym:

<style type="text/css"> 
    DIV#Footer 
    { 
     padding: 10px; 
     color: #fff; 
     background-color: #484848; 
     position: relative; 
     text-align: center; 
    } 
    DIV#Footer INPUT 
    { 
     margin: 5px 15px; 
     position: absolute; 
     top: 0px; 
    } 
    DIV#Footer INPUT.right 
    { 
     float: right; 
    } 
    DIV#Footer INPUT.left 
    { 
     float: left; 
    } 
    #Footer .center { 
     float: left; 
    } 

</style>

Następnie w HTML

<div id="Footer"> 
    <input class="right" type="button" value="Right" /> 
    <input class="left" type="button" value="Left" /> 
    <div class="center">Some text in the middle</div> 
</div>

Będziesz wtedy mieć przejść i dać im trochę marginesów, aby ustawić je tak, jak chcesz. Nie działa to w przypadku układu płynów, chyba że podasz stopkę lub kontener w stopce, aby te elementy miały stałą szerokość.

Źródło

2009-02-12 01:26:53 Matt

To chyba nie działa, obawiam się, że Matt ... –

Jak powiedział jonas.

Zawsze, gdy mam wątpliwości, zalecam jawne określenie szerokości, nawet jeśli nie jest to wymagane, a ja wolę używać tego niż "powiększenie", ponieważ zoom nie został zaprojektowany w celu rozwiązania problemu z układem. Ustawienie szerokości jawnie jednak nie zawsze jest możliwe, więc "zoom" robi lewę.

Źródło

2009-02-12 23:19:51

Inną opcją, którą znalazłem dla mnie, była praca z bezwzględnie umieszczonymi znacznikami div w ie6, to dodawanie lewej i prawej wartości w CSS.

To prosta matematyka, jeśli znasz szerokość div, z którymi pracujesz.

Wydaje się, że "zszywa" pole div w miejscu.

Próbowałem wszystkich innych sugestii, które przeczytałem (w tym javascript, aby zmusić np. Do zachowania się w sposób podobny do it7 lub ie8), ale nie działały.

Powyższe rozwiązanie miało miejsce.

Powodzenia!

Źródło

2010-02-09 20:54:53

Problem z układem IE6 - pozycjonowanie bezwzględne

Odpowiedz

Powiązane problemy