Используя “поле: 0 автоматических”; в Internet Explorer 8

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

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

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

"поле: 0 автоматических" только центрируют элемент в IE, если родительский элемент имеет "текст - выровняйтесь: центр".

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

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

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

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

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

и

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

finally

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

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

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

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

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

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

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

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

Как объяснил 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; .

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

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

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

Ура!

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