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

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

80 голосов
/ 19 марта 2009

Я нахожусь в процессе предварительного тестирования 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 авто;" центрируйте кнопку или нет или не определено?

Ответы [ 12 ]

155 голосов
/ 06 октября 2010

Добавление <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> решает проблему

71 голосов
/ 02 мая 2009

Это ошибка в 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 Незаменимые элементы уровня блока в обычном потоке описывает, как: «Если для width задано значение auto, любые другие значения auto становятся «0» и «ширина» следует из полученного равенства ». Упомянутое здесь равенство

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

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

Однако этот расчет не следует применять к INPUT, который является заменяемым элементом. Замененные элементы покрываются 10.3.4 Уровень блока, замененные элементы в нормальном потоке . Там написано: «Используемое значение« ширина »определяется как для встроенных замененных элементов». Соответствующая часть 10.3.2 «Встроенные», замененные элементы : «если« ширина »имеет вычисленное значение '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 должен вести себя так же.

5 голосов
/ 04 мая 2009

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

10.3.4 Уровень блока, замененные элементы в нормальном потоке

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

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

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

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
5 голосов
/ 03 мая 2009

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

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

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

3 голосов
/ 08 июня 2009

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

2 голосов
/ 11 августа 2013

Добавьте <!doctype html> вверху вашего HTML-вывода.

2 голосов
/ 09 апреля 2012

попробовал все вышеописанное, в итоге сделаю это 

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>
2 голосов
/ 03 марта 2010

Еще раз: мы все ненавидим 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 голосов
/ 19 августа 2009

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

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

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

Ура!

1 голос
/ 19 марта 2009

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...