Использование «маржа: 0 авто;» в 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"?)

ОБНОВЛЕНИЕ: Я тупица. Поскольку input не является элементом уровня блока, мне следовало просто поместить его в 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 блочного уровня, замененные элементы в нормальном потоке . Текст гласит: «Используемое значение ширины определяется как для встроенных заменяемых элементов». Соответствующая часть 10.3.2 Встроенные заменяемые элементы : «если 'width' имеет вычисленное значение '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 должен вести себя точно так же.

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; then, поскольку он уже занимает 100% доступной ширины.

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

Question 5

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

10.3.4 Блочный уровень, заменяемые элементы в нормальном потоке

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

Таким образом, элемент управления формы не следует растягивать до 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

Поскольку это "ошибка" по отношению к спецификации; это не так. Как автор вопроса поста, поведение для этого будет "undefined", так как такое поведение в 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», а «ширина» следует из результирующего равенства.

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