火狐麻烦。浮动容器比孩子长？

Question

我创建了一个 css responsive div（尝试调整浏览器窗口的大小：您会看到相应调整大小的框的高度）：

<div id="container">
    <div id="absolutly">
        <a href="/" id="footer-logo">
            <img title="caneppele" alt="caneppele" src="http://oi59.tinypic.com/20shvh4.jpg" />
        </a>
    </div>
</div>

#container:before 
{
    padding-top: 10%;
    content: "";
    display: block;
}

#container
{
    position:relative;
    width:100%;
    background-color:green;
}

#absolutly
{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
}

#footer-logo
{
    display:block;
    float:left;
    height:100%;
    background-color:red;
}

#footer-logo img
{
    height:100%;
    width:auto;
}

但我不明白为什么 Firefox 中的 a 元素（即 float）可以比子 img 长。它应该和孩子一样大。但是这里（红色部分）更长。

发生了什么事？

Answer 1

您正在浮动#footer-logo，并根据伪元素为#footer-logo 提供的空间使#footer-logo img 缩放。请注意floated elements shrink to fit 默认情况下它们的内容，并且缩小以适应算法可能因浏览器而异，尽管在这种情况下我希望浏览器计算图像的宽度，然后让#footer-logo 缩小以适应该宽度相应地。

貌似Chrome以外的浏览器选择根据图片的实际宽度（或固有宽度）计算#footer-logo的宽度，然后保持它固定在该值上（即使图像开始变得大于其原始大小，它也不会扩展）。高度继续正常缩放，因为您将其高度设置为其父级的 100%（并且父级高度由其伪元素的填充确定）。

但是您在其他浏览器中看到的行为与 Chrome 相比微不足道。如果您将#footer-logo img 设为半透明以便get a peek at how #footer-logo is being rendered：

#footer-logo img
{
    height:100%;
    width:auto;
    opacity:0.5;
}

您会看到 Chrome 甚至根本不会渲染 #footer-logo，除非您弄乱了页面缩放。不是调整浏览器大小，而是缩放页面。

一旦你设法让它呈现出来，Chrome 就会开始表现得有点（只是有点）像其他浏览器一样，将 #footer-logo 的宽度固定在它呈现的任何位置。不同之处在于，当您缩小页面时，图像不会变得小于#footer-logo，就好像它在图像上强制设置最小宽度一样。同样，这在任何其他浏览器上都不会发生。

每次更改页面缩放时，Chrome 都会重绘 #footer-logo 和图像。

这是我第一次在 CSS 中看到一个边缘案例，每个浏览器都设法展示出惊人的错误行为（Chrome 完全崩溃了，这不足为奇）。