Question

我有一个带有div的HTML文档，意味着在某些文本或图像下在背景中着色（我现在都在不同的网站上发生）。最小的案例：

<!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背景颜色不会一直填充到最后文本或图像的大小（是否存在最小宽度说明符）。如下图所示：

另一方面，如果删除了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>

我测试时，顶部的代码确实通过了在线验证器。如何修复（和解释）？

Answer 1

背景不能一直向右的原因是：

默认情况下，像<div>这样的块元素占据父级的整个宽度，因为文本示例中没有空格 - A_Fairly_Long_Word_Or_Image，这意味着它呈现为单个单词，并赢了不要换行，所以文本会在较小的视口中溢出，但不会在div上设置背景。

但是，在quirks模式下（没有doctype），它的行为会有所不同，根据article：

通过展开框来处理溢出。当元素的内容不适合为其指定的维度（显式或隐式）时，则overflow：visible（默认值）表示内容溢出而box维度为指定值。我 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;
}

Answer 2

乍一看，您的min-width声明缺少值的单位类型。

400什么？像素，百分比，ems，视口宽度？

在测试时，如果您只是将其调整为min-width: 400px，则会解决后台问题。

关于文档类型声明（doctype），当您删除它时，浏览器会切换到quirks模式。这使浏览器能够解析非常旧的网页 - 在Web标准出现之前编写的页面。

然而，以怪癖模式渲染现代网页可能是不可预测且不可靠的。虽然你现在可能得到你想要的布局，但它并不稳定。如果没有正确的doctype，您永远不会发布网页。

有关更全面的说明，请参阅：Why does my div height 100% work only when DOCTYPE is removed?

Div背景颜色在视口中切断与doctype

2 个答案: