研究

正如我在Chrome中所期望的那样，它的工作原理如下：

但是在Firefox中，有很多奇怪的空白（与第一个相同）：

此外，这是以下浏览器（从左开始）Firefox，Opera和Internet Explorer 11的屏幕截图：

如您所见，它在Opera中的工作方式与我期望的一样，但在FF和IE11中却没有。在Edge中也无法使用。

我的发现

在我看来，Firefox在调整图像大小后会忘记重新计算父级的宽度。

以下是没有高度限制的屏幕截图（父母的100％高度为200px）：

如果我读取了高度限制，它看起来像这样：

如您所见，宽度是相同的。请注意，绿色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>

Answer 1

我会回答自己的问题，希望能帮助其他人

TLDR：

我丢失了HTML5文档类型声明，看起来像这样：<!DOCTYPE html>。

长版：

在撰写此问题时，突然让我惊讶的是，这可能是由于缺少doctype声明引起的。快速测试证实了我的怀疑。我所缺少的只是<!DOCTYPE html>声明！

可以肯定地说，我将更新代码段以包含doctype。我使用了Visual Studio的doc代码段，却再也没有想过。请注意，html代码段已包含doctype。（在VS中：如果您键入html或doc并在HTML文档中点击选项卡，则会显示一个快速HTML模板）

为什么

在没有doctype声明的情况下，浏览器以所谓的 quirks模式尽其所能呈现页面。在怪癖模式下，浏览器必须猜测页面的外观，而主要关注向后兼容性。因此，结果自然会偏离新的规范。

发明doctype的目的是将旧站点与使用较新规范的站点区别开来，当时IE和Netscape才是问题。您可以在MDN上阅读有关此内容的更多信息：

很高兴知道：

确保将DOCTYPE放在HTML文档的开头。 DOCTYPE之前的任何内容（例如注释或XML声明）都会在Internet Explorer 9及更早版本中触发怪癖模式。

-MDN

在HTML5中，DOCTYPE的唯一目的是激活完全标准模式。

-MDN

如何查看正在使用哪种模式

在Windows上，单击alt调出旧的工具栏，然后转到Tools➡Page info

为什么在Chrome浏览器以外的其他浏览器中，我的容器比其子容器宽？

研究

我的发现

代码

1 个答案:

TLDR：

长版：

为什么

如何查看正在使用哪种模式