Использование "margin: 0 auto;" в Internet Explorer 8

Я занимаюсь некоторым предварительным тестированием IE8, и кажется, что старый метод использования margin: 0 auto; не работает во всех случаях в IE8.

Следующая часть HTML дает центрированную кнопку в FF3, Opera, Safari, Chrome, IE7 и совместимость с IE8, но NOT в стандарте IE8:

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

(В процессе работы я могу добавить явную ширину к кнопке).

Итак, вопрос: какие браузеры верны? Или это один из тех случаев, когда поведение undefined?

(Я думаю, что все браузеры неверны - не должна ли кнопка быть на 100% шириной, если она "отображает: блок"?)

ОБНОВЛЕНИЕ: Я буду dunce. Поскольку вход не является элементом уровня блока, я должен был просто содержать его в div с "text-align: center". Сказав это, ради любопытства, я все равно хотел бы знать, должна ли кнопка быть или не должна быть сосредоточена в приведенном выше примере.

ДЛЯ BOUNTY: Я знаю, что я делаю странные вещи в примере, и, как я указываю в обновлении, я должен был просто выровнять его по центру. Для щедрости мне хотелось бы получить ссылки на спецификации, которые отвечают:

Если я установил "display: block", должен кнопка будет шириной 100%? Или это undefined
Поскольку дисплей является блоком, должен "margin: 0 auto;" центрировать кнопку или не, или undefined?

Ответ 1

Это ошибка в 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 spec 10.3.3 Заблокированные на уровне блока элементы в нормальном потоке описывают, как: "Если для" width "установлено значение" auto ", любые другие" авто "значения становятся" 0 ", а" ширина "следует из полученного равенства". Указанное там равенство

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of contains блок

Итак, обычно все авто приводят к тому, что ширина блока равна ширине содержащего блока.

Однако этот расчет не должен применяться к INPUT, который является замененным элементом. Замененные элементы покрываются 10.3.4 Блочные, замененные элементы в нормальном потоке. Текст там говорит: "Используемое значение" ширина "определяется как для встроенных замененных элементов". Соответствующая часть 10.3.2 Inline, заменяемые элементы: "если" ширина "имеет вычисленное значение" auto ", а элемент имеет внутреннюю ширину, тогда эта внутренняя ширина является используемым значением" width ".

Я думаю, что сценарий 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 должен вести себя одинаково.

Ответ 2

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

Ответ 3

Да, вы можете прочитать спецификацию сто раз и объединить разные кусочки и фрагменты, пока не получите правильную интерпретацию, но именно то, что сделали разработчики браузеров, и почему мы находимся в ситуации, в которой мы находимся сегодня.

В сущности, когда вы применяете ширину 100% к элементу, она должна распространяться на 100% от ее родительской ширины, если этот родитель является блочным элементом. Вы больше не можете центрировать его с margin: 0 auto;, так как он уже занимает 100% доступной ширины.

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

Ответ 4

Элементы управления формой заменяются элементами CSS.

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

Используемое значение "width" определяется как для встроенных замещаемых элементов. Затем для определения полей применяются правила для не замененных элементов уровня блока.

Таким образом, управление формой не должно растягиваться до 100% ширины.

Однако должен быть центрирован. Это похоже на обычную ошибку в IE8. Он центрирует элемент, если вы задаете определенную ширину:

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

Ответ 5

Как объясняется 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; к кнопке.

Ответ 6

Поскольку это является "ошибкой" по отношению к спецификации; это не так. Как автор поставых вопросов, поведение для этого было бы "undefined", так как это поведение в IE происходит только на элементах управления формой, как в spec:

CSS 2.1 не определяет, какие свойства применяются к элементам управления формой и кадры или как CSS можно использовать для стиль их. Пользовательские агенты могут применять CSS свойства этих элементов. Авторы рекомендуется рассматривать такую поддержку как экспериментальный.

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

Ура!

Ответ 7

Еще раз: мы все ненавидим 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>

Ответ 8

попробовал все вышеперечисленное, в итоге сделаем это

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

Ответ 9

Добавьте <!doctype html> вверху вашего вывода HTML.

Ответ 10

не должна быть 100% -ной ширины кнопки, если это "display: block"

Нет. Это просто означает, что это единственное место в пространстве по вертикали (если вы не используете другой трюк, чтобы заставить что-то еще там). Это не значит, что он должен заполнить ширину этого пространства.

Я думаю, что ваша проблема в этом случае заключается в том, что input не является изначально блочным элементом. Попробуйте вложить его в другой div и установите для этого поле. Но у меня нет браузера IE8, чтобы проверить это на данный момент, так что это просто предположение.

Ответ 11

"margin: 0 auto" только центрирует элемент в IE, если родительский элемент имеет "text-align: center".

Ответ 12

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

Подробнее см. Детали модели форматирования форматирования - вычисление ширины и полей из спецификаций CSS 2.1. Релятивные биты включают в себя:

В контексте форматирования блоков каждый левый внешний край касается левого край содержащего блока.

Когда общая ширина встроенного коробки на линии меньше ширины строки, содержащей их, их горизонтальное распределение в пределах line box определяется Свойство text-align.

наконец,

Если для параметра "ширина" установлено значение "авто", любые другие Значения "auto" становятся "0" и "width" следует из полученного равенства.

Если оба "margin-left" и "margin-right" - "auto", их использовали значения равны. Это горизонтально центрирует элемент по отношению к краями содержащего блока.