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

Question

Я нахожусь в процессе предварительного тестирования 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. Сказав это, ради любопытства я все же хотел бы знать, должна ли кнопка центрироваться или не центрироваться в приведенном выше примере.

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

1. Если я установлю «display: block», следует ширина кнопки 100%? Или это не определено

2. Поскольку дисплей является блоком, следует "поле: 0 авто;" центрируйте кнопку или нет или не определено?

Answer 1

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

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

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

Answer 2

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

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

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

и

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

наконец

Если для 'width' установлено значение 'auto', любой другой значения 'auto' становятся '0' и 'width' вытекает из полученного равенства.

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