Використання “margin: 0 auto;” в Internet Explorer 8

Question 1

Я в процесі попереднього тестування IE8, і здається, що стара техніка використання margin: 0 auto;працює не у всіх випадках в IE8.

Наступний фрагмент HTML дає центрированную кнопку в FF3, Opera, Safari, Chrome, IE7 та IE8, але НЕ в IE8:

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

(Як робоче рішення я можу додати явну ширину кнопки).

Тож питання: які браузери правильні? Або це один із тих випадків, коли поведінка невизначена?

(Я думаю, що всі браузери неправильні - чи не повинна бути кнопка шириною 100%, якщо вона "display: block"?)

ОНОВЛЕННЯ: Я переживаю. Оскільки введення не є елементом рівня блоку, я повинен був просто містити його в div з "text-align: center". Сказавши це, задля цікавості, я все одно хотів би знати, чи має бути кнопка відцентрована у наведеному вище прикладі.

ДЛЯ БОНТІ: Я знаю, що роблю дивні речі у прикладі, і, як я зазначав в оновленні, мені слід було просто вирівняти його по центру. Для нагороди я хотів би посилатися на специфікації, які відповідають:

Якщо я встановив "display: block", чи повинна бути кнопка шириною 100%? Або це невизначено?
Оскільки дисплей блокований, слід "margin: 0 auto;" відцентрувати кнопку, чи ні, чи невизначено?

Question 2

Це помилка в IE8.

Починаючи з другого запитання: “margin: 0 auto” центрує блок, але лише тоді, коли ширина блоку встановлена меншою за ширину батьківської. Зазвичай вони стають однаковими. Ось чому текст у прикладі нижче не відцентрований.

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

Як тільки стиль відображення елемента b встановлено блокувати, його ширина за замовчуванням становить батьківську ширину. CSS специфікація 10.3.3 Незмінені елементи на рівні блоку в нормальному потоці описують, як: «Якщо для параметра« width »встановлено значення« auto », будь-які інші значення« auto »стають« 0 », а з отриманої рівності випливає« width » . " Згадана там рівність

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ширина блоку, що містить

Отже, зазвичай всі автомобілі призводять до того, що ширина блоку дорівнює ширині блоку, що містить.

Однак цей розрахунок не слід застосовувати до INPUT, який є заміненим елементом. Замінені елементи охоплені 10.3.4, замінені на рівні блоку елементи в нормальному потоці . У тексті сказано: "Використовуване значення" width "визначається як для вбудованих елементів, що замінюються". Відповідною частиною 10.3.2 вбудованих, замінених елементів є: "якщо" ширина "має обчислене значення" авто ", а елемент має внутрішню ширину, тоді ця внутрішня ширина є використовуваним значенням" ширини "".

Я думаю, що сценарій, про який піклується CSS, - це елемент IMG. Логотип Stackoverflow у цьому прикладі буде центрований у всіх браузерах.

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

Елемент INPUT повинен поводитися так само.

Question 3

Додавання <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">вирішує проблему

Question 4

Так, ви можете прочитати специфікацію сто разів і комбінувати різні шматочки, поки у вас не вийде інтерпретація, яка вважається правильною, - але це саме те, що зробили продавці браузерів, і тому ми опинилися в ситуації, яка є сьогодні.

По суті, коли ви застосовуєте до елемента ширину 100%, вона повинна поширюватися на 100% ширини батьківського елемента, якщо цей батьківський елемент є блочним елементом. margin: 0 auto;Тоді ви більше не можете відцентрувати його, оскільки він вже займає 100% доступної ширини.

Щоб відцентрувати що-небудь, margin: 0 auto;потрібно визначити явну ширину. Для центрування вбудованого елемента можна використовувати text-align: center;батьківський елемент, хоча це може мати небажані побічні ефекти, якщо у батьків є інші дочірні елементи.

Question 5

Елементи керування формою - це замінені елементи в CSS.

10.3.4 Замінені елементи на рівні блоку в нормальному потоці

Використовуване значення 'width' визначається як для вбудованих замінених елементів . Тоді правила для незамінених елементів рівня блоку застосовуються для визначення полів.

Тож елемент керування формою не слід розтягувати на 100% ширини.

Однак воно повинно бути по центру. Це схоже на звичайну помилку в IE8. Він центрує елемент, якщо ви встановите певну ширину:

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />

Question 6

Як пояснив buti-oxa, це помилка з тим, як IE8 обробляє замінені елементи. Якщо ви не хочете додавати до кнопки явну ширину, тоді ви можете змінити її на вбудований блок та вирівняти вміст по центру:

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

Якщо ви хочете, щоб це працювало у старих версіях Mozilla (включаючи FF2), які не підтримують вбудований блок, тоді ви можете додати display: -moz-inline-stack;кнопку.

Question 7

Наскільки це "помилка" стосовно специфікації; це не так. Як запитує автор допису, поведінка для цього буде "невизначеною", оскільки така поведінка в IE відбувається лише на елементах керування формою, згідно специфікації:

CSS 2.1 не визначає, які властивості застосовуються до елементів управління та фреймів, або як CSS може бути використаний для їх стилізації. Користувацькі агенти можуть застосовувати властивості CSS до цих елементів. Авторам рекомендується розглядати таку підтримку як експериментальну.

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

На здоров’я!

Question 8

Ще раз: ми всі ненавидимо 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>

Question 9

спробував усе вищесказане, в кінцевому підсумку зробив це

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>

Question 10

Додайте <!doctype html>у верхній частині виводу HTML.

Question 11

чи не повинна кнопка мати 100% ширини, якщо вона "display: block"

Ні. Це просто означає, що це єдина річ у просторі по вертикалі (припускаючи, що ви не використовуєте черговий трюк, щоб змусити щось інше там також). Це не означає, що він повинен заповнювати ширину цього простору.

Я думаю, що ваша проблема в цьому випадку полягає в inputтому, що спочатку не є блочним елементом. Спробуйте вкласти його в інший div і встановіть поле для цього. Але на даний момент у мене немає браузера IE8, щоб перевірити це, тому це лише здогадки.

Question 12

"margin: 0 auto" лише в центрі елемента в IE, якщо батьківський елемент має "text-align: center".

Question 13

Припускаючи, що margin: 0 autoтоді елемент повинен бути відцентрований, але ширина залишається такою, якою вона є - якою б вона не була розрахована, не враховуючи жодних налаштувань полів.
Якщо для <INPUT>тегу встановлено значення display:block, його слід відцентрувати за допомогою margin: 0 auto.

Детальніше див. У деталях моделі візуального форматування - обчислення ширини та полів із специфікацій CSS 2.1. Біти відновлення включають:

У контексті форматування блоків лівий зовнішній край кожного поля торкається лівого краю вміщуючого блоку.

і

Коли загальна ширина рядків у рядку менше ширини рядка, що їх містить, їх горизонтальний розподіл усередині рядка визначається властивістю 'text-align'.

нарешті

Якщо для параметра «width» встановлено значення «auto», будь-які інші значення «auto» стають «0», а з отриманої рівності випливає «width».

Якщо і "margin-left", і "margin-right" є "auto", їх використовувані значення рівні. Це горизонтально центрує елемент по краях містять блоку.