CSS - Internet Explorer и фон тега <main> - программирование

У меня довольно простой макет, который отлично подходит как в Firefox, так и в Chrome, но Internet Explorer (версия 11), похоже, не может отображать какой-либо цвет фона для элемента <main>.

У меня есть элемент <main> как дочерний элемент <body>, и ни background, ни background-color, похоже, не имеет никакого значения. <main> всегда будет иметь тот же фон, что и <body>. Я не нашел ничего, что говорит о том, является ли это ошибкой в IE.

Отметьте этот jsfiddle, используя Internet Explorer, чтобы узнать, что я имею в виду.

Очевидно, я мог бы просто заменить <main> на <div id="main"> и обновить мои селектора CSS, но я хочу понять, почему это происходит.

Ответ 1

IE11 не поддерживает элемент <main> изначально. Вы можете ввести поддержку для него, используя script, например Modernizr, или одну безвредную строку JS:

document.createElement('main');

Элемент не будет вставлен в DOM, но теперь он будет распознан как правильный элемент IE. После этого у него все еще нет правильного стиля. Добавьте в свой CSS следующее:

main {
    display:block;
}

И все будет хорошо. Причина, по которой вы в настоящее время видите, что она не получает никакого контента, потому что IE не добавляет ее в модель окна без этих двух шагов, и поэтому не получает "макета" или "размер". Это просто невидимо, почему вы видите тело. Он содержит элементы, которые получают визуализированный (вид) правильно на основе верхней левой координаты элемента <main>.

Ответ 1

Ответ 2