在Chrome中，容器元素宽度超出内部元素宽度，在matchHeight应用

Question

我在Chrome浏览器中有一个以奇怪方式呈现的页面（特别是Vivaldi）;在Firefox中，没有问题。该页面包含一个包含链接的范围，该链接包含一个图像，如下所示：

<span class="container">
    <a href="...">
        <img class="content" src="...">
    </a>
</span>

CSS：

.container [
    float:left;
    display:table-cell;
    padding-right: 10px;
}

.content {
    float: left;
    height: 100%;
    max-height: 200px;
    max-width: 200px;
}

matchHeight插件用于将容器的高度与相邻元素的高度对齐。

$('.container').matchHeight({
    target: $('#adjacent_element')
});

如果#adjacent_element的高度为100px，并且图像为200px×200px，则在应用matchHeight后，Chrome中会发生以下情况：

• 图像将呈现为100px×100px（好）
• .container的高度为100px（好）
• .container的宽度为200px（有问题） - 宽度应与内部图像的宽度相匹配，即100px。 Firefox
中不会出现此问题

更奇怪的是，如果在渲染页面后，在Chrome中，我将鼠标光标移到.container上，将其宽度调整到所需的宽度（即上述场景中的100px）。

我想要渲染页面，以便在应用matchHeight之后，将.container的宽度调整为它包含的图像的宽度。有关如何执行此操作的任何建议，而不诉诸涉及添加更多JavaScript代码的kludgy解决方案？似乎matchHeight插件和CSS的组合应该足以做到这一点（事实上，在Firefox中，它们是）。