Używanie "margin: 0 auto;" w Internet Explorer 8

Jestem w trakcie Zaawansowanego testowania IE8 i wydaje się, że stara technika używania margin: 0 auto; nie działa we wszystkich przypadkach w IE8.

W tym samym czasie, w przeciwieństwie do innych formatów HTML, które nie są w pełni kompatybilne ze standardem IE8, nie są w pełni kompatybilne ze standardem IE8.]} 

<div style="height: 500px; width: 500px; background-color: Yellow;">
    <input type="submit" style="display: block; margin: 0 auto;" />
</div>

(jako obejście Mogę dodać wyraźną szerokość do przycisku).

Więc pytanie brzmi: które przeglądarki są poprawne? A może to jeden z tych przypadki, w których zachowanie jest nieokreślone?

(moim zdaniem Wszystkie przeglądarki są niepoprawne - czy przycisk nie powinien mieć 100% szerokości, jeśli jest to "display: block"?)

UPDATE: jestem dupkiem. Ponieważ input nie jest elementem na poziomie bloku, powinienem po prostu umieścić go w div z "text-align: center". Mówiąc to, ze względu na ciekawość, nadal chciałbym wiedzieć, czy przycisk powinien, czy nie powinien być wyśrodkowany w powyższym przykładzie.

Na BOUNTY: wiem, że robię dziwne rzeczy w przykładzie, i jak zaznaczam w aktualizacji, powinienem był po prostu wyrównać go do środka. Na bounty chciałbym nawiązać do specyfikacji, która odpowiada:

  1. Jeśli ustawiłem "display: block", powinien szerokość przycisku 100%? A może to undefined?

  2. Ponieważ wyświetlacz jest blokowy, powinien "margin: 0 auto;" wyśrodkuj przycisk, lub nie, czy nieokreślone?

Author: Vadim Kotov, 2009-03-19
Source

12 answers

Jest to błąd w IE8.

Zaczynając od drugiego pytania: "margin: 0 auto" wyśrodkuje blok, ale tylko wtedy, gdy szerokość bloku jest ustawiona na mniejszą niż szerokość rodzica. Zazwyczaj są takie same. Dlatego tekst w poniższym przykładzie nie jest wyśrodkowany. 

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

Gdy styl wyświetlania elementu b jest ustawiony na block, jego szerokość domyślnie jest równa szerokości nadrzędnej. CSS spec 10.3.3 blokowe, nie zastępowane elementy w normalnym przepływie opisuje jak: "jeśli 'szerokość' jest ustawiona na 'auto', inne wartości 'auto' stają się '0', a 'szerokość' wynika z otrzymanej równości."Równość, o której mowa jest

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = szerokość bloku

Tak więc, normalnie wszystkie autos powodują, że szerokość bloku jest równa szerokości zawierającego bloku.

Jednakże obliczenia te nie powinny być stosowane do danych wejściowych, które są zastępowane element. Wymienione elementy są objęte zakresem pkt 10.3.4 na poziomie bloku, zastępowane elementy w normalnym przepływie . Tekst mówi: "zastosowana wartość 'width' jest określana tak, jak dla elementów zastępowanych w wierszu."Odpowiednią częścią 10.3.2 w wierszu, zastępowanych elementów jest: "jeśli' width 'ma obliczoną wartość 'auto', a element ma wewnętrzną szerokość, to ta wewnętrzna szerokość jest użytą wartością 'width'".

Domyślam się, że scenariuszem, na którym zależy CSS, jest element IMG. Logo Stackoverflow w tym przykładzie będą wyśrodkowane przez wszystkie przeglądarki.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt="">
</div>

Element wejściowy powinien zachowywać się tak samo.

 71
Author: buti-oxa,
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-05-02 18:36:31

Dodanie <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> rozwiązuje problem

 155
Author: Pal,
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
2010-10-06 00:25:06

Tak, można przeczytać specyfikację sto razy, i połączyć różne kawałki i kawałki, aż masz interpretację, która wydaje się właściwa-ale to jest dokładnie to, co dostawcy przeglądarek zrobił i dlatego jesteśmy w sytuacji, w której jesteśmy dzisiaj.

Zasadniczo, gdy zastosujesz Szerokość 100% do elementu, powinien on rozciągnąć się na 100% szerokości rodzica, jeśli ten rodzic jest elementem blokowym. Nie możesz go wyśrodkować za pomocą margin: 0 auto;, ponieważ zajmuje już 100% dostępnej szerokości.

Aby wyśrodkować cokolwiek z margin: 0 auto;, musisz zdefiniować jawną szerokość. Aby wyśrodkować element inline, możesz użyć text-align: center; na elemencie nadrzędnym, chociaż może to powodować niepożądane efekty uboczne, jeśli rodzic ma inne dzieci.

 5
Author: Wolfr,
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-05-03 09:14:55

Form controls to zastępowane elementy w CSS.

10.3.4 Block-level, zastępowane elementy w normalnym przepływie

Zastosowana wartość "szerokość" jest określana tak, jak dla elementów zastępowanych w wierszu . Następnie stosuje się reguły dla nie zastąpionych elementów blokowych w celu określenia marginesów.

Tak więc kontrola formularza nie powinna być rozciągnięta do 100% szerokości.

Jednak powinien Bądź wyśrodkowany. Wygląda jak zwykły błąd w IE8. Wyśrodkowuje element, jeśli ustawisz określoną szerokość: 

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
 5
Author: Kornel,
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-05-04 04:11:39

Jak wyjaśnił buti-oxa jest to błąd ze sposobem, w jaki IE8 obsługuje zastępowane elementy. Jeśli nie chcesz dodawać jawnej szerokości do przycisku, możesz zmienić go na inline-block i wyśrodkować zawartość: 

<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;">
  <input type="submit" style="display: inline-block;" />
</div>

Jeśli chcesz, aby to działało w starszych wersjach Mozilli (w tym FF2), które nie obsługują bloku inline, możesz dodać display: -moz-inline-stack; do przycisku.

 3
Author: Simon Dyson,
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-06-08 11:46:33

Jeśli chodzi o to, że jest to "bug" w odniesieniu do spec, to nie jest. jak autor postu pyta, zachowanie dla tego byłoby "nieokreślone", ponieważ takie zachowanie w IE występuje tylko na kontrolkach formularzy, zgodnie ze spec:

CSS 2.1 nie definiuje, które właściwości mają zastosowanie do kontrolek formularzy i ramek, czyli jak CSS może być użyty do stylizuj je. Agenci użytkownika mogą stosować CSS właściwości tych elementów. Autorzy są zalecane w leczeniu takiego wsparcia jako eksperymentalne.

( http://www.w3.org/TR/CSS21/conform.html#conformance )

Zdrówko!
 2
Author: ,
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-08-19 12:26:27

Jeszcze raz: wszyscy nienawidzimy IE!

<div style="width:100%;background-color:blue;">
    <div style="margin:0 auto;width:300px;background-color:red;">
        Not Working
    </div>
</div>

<div style="width:100%;background-color:green;text-align:center;">
    <div style="margin:0 auto;width:300px;background-color:orange;text-align:left;">
        Working, but dumb that you have to use text-align
    </div>
</div>
 2
Author: zeroasterisk,
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
2010-03-03 14:46:35

Próbowałem wszystkich powyższych, koniec robi to 

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>
 2
Author: Rouslan Karimov,
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
2012-04-08 21:11:24

Dodaj <!doctype html> u góry wyjścia HTML.

 2
Author: Mohammad Naji,
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
2013-08-11 08:04:05

Przycisk nie powinien mieć 100% szerokości, jeśli jest "display: block"

Nie. To po prostu oznacza, że jest to jedyna rzecz w przestrzeni pionowo (zakładając, że nie używasz innej sztuczki, aby wymusić coś innego tam, jak również). To nie znaczy, że musi wypełnić szerokość tej przestrzeni.

Myślę, że Twoim problemem w tym przypadku jest to, że {[0] } nie jest natywnie elementem blokowym. Spróbuj zagnieżdżać go w innym div I ustaw na nim margines. Ale nie mam przeglądarki IE8 do przetestuj to w tej chwili, więc to tylko zgadywanie.

 1
Author: Joel Coehoorn,
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-03-19 14:10:22

"margin: 0 auto" Wyśrodkowuje element w IE tylko wtedy, gdy element nadrzędny ma "text-align: center".

 1
Author: Chris,
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-03-19 14:32:16
  1. zakładając margin: 0 auto, element powinien być wyśrodkowany, ale szerokość jest pozostawiona tak, jak jest--niezależnie od tego, jak jest obliczana, bez uwzględnienia jakichkolwiek ustawień marginesu.
  2. Jeśli ustawisz znacznik <INPUT> na display:block, to powinien być wyśrodkowany przez margin: 0 auto.

Zobacz szczegóły modelu formatowania wizualnego-obliczanie szerokości i marginesów ze specyfikacji CSS 2.1, aby uzyskać więcej szczegółów. Relavent bity zawierają:

W kontekście formatowania bloków, każdy lewa zewnętrzna krawędź pudełka dotyka / align = "left" / krawędź bloku zawierającego.

I

Gdy całkowita szerokość linii pola na linii jest mniejsza niż szerokość skrzyni liniowej zawierającej je, ich rozkład poziomy w obrębie pole linii jest określone przez właściwość 'text-align'.

Wreszcie

Jeśli 'szerokość' jest ustawiona na 'auto', wszelkie inne wartości "auto" stają się " 0 " i "szerokość" wynika z wynikającej z tego równości.

Jeśli oba / align = "left" / 'margin-right' to 'auto', ich używane wartości są równe. Ten poziomo Wyśrodkowuje element w odniesieniu do krawędzie bloku zawierającego.

 0
Author: Jon Adams,
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-04-30 15:07:10