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

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

<!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). Как показано ниже:

С другой стороны, если 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>

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

источник

2016-07-18 Daniel R. Collins

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

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

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

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

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

Настоятельно рекомендуем использовать стандартный 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; 
}

источник

2016-07-18 03:34:20 Stickers

Благодарим за это, включая минимальную ширину: предложение 100%. –

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

400 какой? Пиксели, проценты, ems, ширина видового экрана?

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

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

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

Для более полного пояснения см: Why does my div height 100% work only when DOCTYPE is removed?

источник

2016-07-18 02:45:03

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

ответ

Смежные вопросы