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

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

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

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

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

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

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

UPDATE: я веду себя глупо. Поскольку input не является элементом уровня блока, я должен был просто содержать его в div с "text-align: center". Сказав, что ради любопытства, я все же хотел бы знать, должна ли кнопка или не следует центрироваться в приведенном выше примере.

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

  1. если я установил "дисплей: блок", должен кнопка будет шириной 100%? Или это неопределено?

  2. так как дисплей блок, должен "margin: 0 auto;" центрируйте кнопку или нет или не определено?

80
css html internet-explorer-8

12 ответов

это ошибка в IE8.

начиная со второго вопроса:" margin: 0 auto " центрирует блок, но только тогда, когда ширина блока меньше ширины родителя. Обычно они одинаковы. Вот почему текст в приведенном ниже примере не центрирован. 

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

Как только стиль отображения элемента b установлен в block, Его ширина по умолчанию равна ширине родителей. CSS spec 10.3.3 уровень блока, не-замененные элементы в нормальном поток описывает, как: "если" ширина "установлена в "авто", любые другие значения "авто" становятся "0", а "ширина" следует из полученного равенства.- Упомянутое равенство ... --3-->

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ширина содержащего блока

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

однако, этот расчет не следует применять к входу, который является замененным элементом. Заменяемые элементы покрываются 10.3.4 уровень блока, замененные элементы в нормальном потоке. Текст там говорит: "используемое значение 'width' определяется как для встроенных замененных элементов.- Соответствующая часть 10.3.2 встроенные, замененные элементы is: "если" 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>

входной элемент должен вести себя так же.

71

добавлять <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> решает вопрос

155

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

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

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

5

элементы управления формы замена элементов в 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; кнопки.

3

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

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

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

Ура!

2

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

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

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

добавить <!doctype html> в верхней части вывода HTML.

2

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

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

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

1

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

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

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

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

и

когда полная ширина встроенного боксы на линии меньше ширины из коробки линии содержа их, их горизонтальное распределение в строка box определяется свойство "выравнивание текста".

наконец-то

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

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

0