为什么我的容器在 Chrome 以外的其他浏览器中比它的子容器宽？
Why is my container wider than its child in other browsers than Chrome?
我需要一些帮助。当我在 Chrome 中从事一个项目时，我想在 Firefox 中对其进行测试，但对为什么它看起来如此不同感到困惑。
任何人都可以向我解释为什么包含图像的绿色 div 不调整其相对于子项的宽度吗？这是一个错误吗？这是一个功能吗？这是一个错误功能吗？
研究
正如我在 Chrome 中所期望的那样，它看起来像这样：
但是在 Firefox 中，有很多奇怪的白色space（这与第一个图像相同）：
此外，这是以下浏览器的屏幕截图（从左开始）Firefox、Opera 和 Internet Explorer 11：
如您所见，它在 Opera 中的工作方式与我预期的一样，但在 FF 和 IE11 中则不然。它在 Edge 中也不起作用。
我的发现
在我看来，Firefox 在调整图像大小后忘记重新计算父级的宽度。
这里是一个没有高度限制的截图（100% parents 200px height）：
如果我读取高度限制，它看起来像这样：
可以看到，宽度是一样的。注意绿色div的宽度是510px。这与图像（500px）+填充（5px + 5px）相同。
密码
为了您的方便，我尝试添加一个 jsFiddle，但奇怪的是，我无法在那里重现错误（它按预期工作）。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.wrapper {
height: 200px;
}
.div1 {
float: left;
background-color: green;
}
.div1 img {
height: 100%;
padding: 5px;
}
.div2 {
background-color: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
<img src="http://placehold.it/500x500">
</div>
<div class="div2">
<h1>Heading</h1>
</div>
</div>
</body>
</html>
我会回答我自己的问题，希望能帮助到别人
TLDR：
我遗漏了 HTML5 文档类型声明，它看起来像这样：<!DOCTYPE html>.
更长的版本：
在写这个问题的时候突然想到，可能是缺少doctype声明导致的。快速测试证实了我的怀疑。我所缺少的只是 <!DOCTYPE html> 声明！
可以肯定地说，我将更新我的代码片段以包含文档类型。我使用了 Visual Studio 的 doc 代码段并且再也没有考虑过它。请注意，html 代码段已包含文档类型。 （在 VS 中：如果您在 HTML 文档中键入 html 或 doc 并点击 Tab，将出现一个快速 HTML 模板）
为什么
如果没有文档类型声明，浏览器将以所谓的 怪癖模式 尽可能地呈现页面。在 quirks 模式下，浏览器必须猜测页面的外观，主要关注向后兼容性。因此结果自然会偏离较新的规格。
文档类型的发明是为了在 IE 和 Netscape 还流行的时候将遗留站点与使用较新规范的站点区分开来。您可以在此处的 MDN 上阅读更多相关信息：
很高兴知道：
Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.
-MDN
In HTML5, the only purpose of the DOCTYPE is to activate full standards mode.
-MDN
如何查看正在使用的模式
在 Windows 上，点击 alt 调出旧的工具栏，然后转到 Tools ➡ Page info
我需要一些帮助。当我在 Chrome 中从事一个项目时，我想在 Firefox 中对其进行测试，但对为什么它看起来如此不同感到困惑。
任何人都可以向我解释为什么包含图像的绿色 div 不调整其相对于子项的宽度吗？这是一个错误吗？这是一个功能吗？这是一个错误功能吗？
研究
正如我在 Chrome 中所期望的那样，它看起来像这样：
但是在 Firefox 中，有很多奇怪的白色space（这与第一个图像相同）：
此外，这是以下浏览器的屏幕截图（从左开始）Firefox、Opera 和 Internet Explorer 11：
如您所见，它在 Opera 中的工作方式与我预期的一样，但在 FF 和 IE11 中则不然。它在 Edge 中也不起作用。
我的发现
在我看来，Firefox 在调整图像大小后忘记重新计算父级的宽度。
这里是一个没有高度限制的截图（100% parents 200px height）：
如果我读取高度限制，它看起来像这样：
可以看到，宽度是一样的。注意绿色div的宽度是510px。这与图像（500px）+填充（5px + 5px）相同。
密码
为了您的方便，我尝试添加一个 jsFiddle，但奇怪的是，我无法在那里重现错误（它按预期工作）。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.wrapper {
height: 200px;
}
.div1 {
float: left;
background-color: green;
}
.div1 img {
height: 100%;
padding: 5px;
}
.div2 {
background-color: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
<img src="http://placehold.it/500x500">
</div>
<div class="div2">
<h1>Heading</h1>
</div>
</div>
</body>
</html>
我会回答我自己的问题，希望能帮助到别人
TLDR：
我遗漏了 HTML5 文档类型声明，它看起来像这样：<!DOCTYPE html>.
更长的版本：
在写这个问题的时候突然想到，可能是缺少doctype声明导致的。快速测试证实了我的怀疑。我所缺少的只是 <!DOCTYPE html> 声明！
可以肯定地说，我将更新我的代码片段以包含文档类型。我使用了 Visual Studio 的 doc 代码段并且再也没有考虑过它。请注意，html 代码段已包含文档类型。 （在 VS 中：如果您在 HTML 文档中键入 html 或 doc 并点击 Tab，将出现一个快速 HTML 模板）
为什么
如果没有文档类型声明，浏览器将以所谓的 怪癖模式 尽可能地呈现页面。在 quirks 模式下，浏览器必须猜测页面的外观，主要关注向后兼容性。因此结果自然会偏离较新的规格。
文档类型的发明是为了在 IE 和 Netscape 还流行的时候将遗留站点与使用较新规范的站点区分开来。您可以在此处的 MDN 上阅读更多相关信息：
很高兴知道：
Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.
-MDN
In HTML5, the only purpose of the DOCTYPE is to activate full standards mode.
-MDN
如何查看正在使用的模式
在 Windows 上，点击 alt 调出旧的工具栏，然后转到 Tools ➡ Page info