Использование "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. если я установил "display: block", следует кнопка будет шириной 100%? Или это не определено?

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

12 80
html css 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 установлен в блок, его ширина по умолчанию равна ширине родителей. CSS spec10.3.3 уровень блока, не-замененные элементы в нормальном поток описывает, как: "если 'width' установлен в 'auto', любые другие 'auto' значения становятся '0' и 'width' следует из полученного равенства."Упомянутое там равенство

'левое поле' + 'границы слева-ширина' + 'обивка-слева' + 'ширина' + 'обивка-право' + 'границы правой ширина' + 'маржи-право' = ширины содержащего блока

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

однако, этот расчет не следует применять к входу, который является заменяемым элементом. Замененные элементы покрываются 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

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

CSS 2.1 не определяет, какой свойства применяются к элементам управления формы и фреймы, или как 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> тег display:block, то он должен быть центрирован с margin: 0 auto.

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

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

и

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

наконец-то

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

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

0