Div цвет фона отключается на видовом экране с помощью doctype

У меня есть HTML-документ с div, предназначенный для того, чтобы быть окрашенным в фоновом режиме под каким-то текстом или изображением (у меня есть и то, и другое на разных сайтах прямо сейчас). Минимальный случай: 

<!doctype html>
<html lang="en">

<head>
  <title>Test</title>
  <meta charset="utf-8">
</head>

<body>
  <header>
    <div style="min-width: 400; background-color: black">
      <div style="font-size: x-large; color: red">
        A_Fairly_Long_Word_Or_Image
      </div>
    </div>
  </header>
</body>

</html>

Проблема, которую я нахожу, заключается в следующем: если окно браузера (проверенное как в Firefox 47, так и в IE 11) сделано очень узким, а затем мы прокручиваем вправо, цвет фона div не заполняет весь путь до конца текста или изображения (независимо от того, есть ли спецификатор min-width или нет). Как показано ниже:

Div заливка фона отрезана

С другой стороны, если спецификатор DOCTYPE удален, то он действительно работает так, как ожидалось:

<html lang="en">

<head>
  <title>Test</title>
  <meta charset="utf-8">
</head>

<body>
  <header>
    <div style="min-width: 400; background-color: black">
      <div style="font-size: x-large; color: red">
        A_Fairly_Long_Word_Or_Image
      </div>
    </div>
  </header>
</body>

</html>

Див фон заполнить заполнить

Код сверху действительно проходит онлайн-валидатор, когда я его тестирую. Как это можно исправить (и объяснить)?

2 2
html css background-color width quirks-mode

2 ответа:

Причина, по которой фон не идет полностью вправо, заключается в следующем:

По умолчанию блочный элемент типа <div> занимает всю ширину родительского элемента, учитывая, что в текстовом образце нет пустого места - A_Fairly_Long_Word_Or_Image, что означает, что он отображается как одно слово и не будет переноситься, поэтому текст переполняется в меньшем видовом окне, но не для фона, который устанавливается на div.

Однако в режиме quirks (без doctype) он ведет себя по-другому, в соответствии с этим статья :

Переполнение обрабатывается путем расширения коробки. Если содержимое элемента не укладывается в размеры, указанные для него (явно или неявно), то переполнение: видимый (по умолчанию) означает, что содержимое переполняется, в то время как размеры коробки указаны. I N режим причуд, размеры меняются; это легко увидеть, например, если коробка имеет цвет фона или границу.

Как исправить это в рамках стандарта режим?

Пожалуйста, используйте стандартный HTML5 <!doctype html> настоятельно рекомендуется. Вы можете установить контейнер div в display: inline-block; + min-width: 100%;, поскольку размер встроенного блока зависит от содержимого внутри, а минимальная ширина позволит ему расширяться, даже если видовой экран больше, проверьте jsFiddle, измените размер выходного кадра и смотрите.

.container {
  background-color: black;
  font-size: x-large;
  color: red;
  display: inline-block;
  min-width: 100%;
}
<div class="container">A_Fairly_Long_Word_Or_Image</div>

Ну, если вы хотите, чтобы текст был обернут, просто примените word-break: break-all; - jsFiddle.

.container {
  background-color: black;
  font-size: x-large;
  color: red;
  word-break: break-all;
}
2

На первый взгляд, в вашем объявлении min-width отсутствует тип единицы измерения для значения.

400 - что? Пиксели, проценты, ЭМС, ширина видового экрана?

При тестировании, если вы просто настроите его на min-width: 400px, фоновая проблема будет решена.

Что касается объявления типа документа (doctype), то при его удалении браузер переходит в режим quirks. Это позволяет браузеру анализировать очень старые веб-страницы-страницы, созданные до появления веб-стандартов.

Рендеринг современный веб-страницы в режиме причуд, однако, могут быть непредсказуемыми и ненадежными. Хотя вы можете получить макет, который хотите сейчас, он не стабилен. Вы должны никогда публиковать веб-страницы без соответствующего doctype.

Для более полного объяснения смотрите: Почему моя высота div 100% работает только тогда, когда DOCTYPE удален?

1