Firefox的麻烦。浮子容器比孩子长吗？ [英] Firefox trouble . A float container is longer than the child?

问题描述

我创建了一个css 响应式div （尝试调整浏览器窗口大小：您将看到盒子大小的高度一致）：

I've created a css responsive div (try to resize the browser window: you will see the height of the box resizing accordly):

<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元素）可以比子img长。它应该和孩子一样大。

but I don't understand why the a element in Firefox (which is float) can be longer than the child img. It should be as large as the child. But here (the red part) is longer.

推荐答案

您浮动＃footer-logo ，并且根据空间缩放＃footer-logo img 由伪元素提供给＃footer-logo 。请注意，默认情况下，浮动元素缩小到适合其内容，缩小到适合的算法可能会在不同的浏览器之间变化，虽然在这种情况下我会期望浏览器计算图像的宽度，然后＃footer-logo 收缩

You're floating #footer-logo, and having #footer-logo img scale according to the space made available to #footer-logo by the pseudo-element. Note that floated elements shrink to fit their contents by default, and the shrink-to-fit algorithm may vary across browsers, although in this case I would expect the browser to calculate the width of the image, then have #footer-logo shrink to fit that width accordingly.

看起来Chrome以外的浏览器会选择计算＃footer-logo的宽度根据图片的实际宽度（或内部宽度），然后将其固定为该值（即使图片开始变大，原尺寸）。高度继续按正常比例缩放，因为您将其高度设置为其父级的100％（父级高度由其伪元素的填充位置确定）。

It looks like browsers other than Chrome choose to calculate the width of #footer-logo according to the actual width (or intrinsic width) of the image, and then keep it fixed at that value (it does not expand even when the image starts growing larger than its original size). The height continues to scale as normal, since you set its height to 100% of its parent (and the parent height is determined by the padding from its pseudo-element).

但是，你在其他浏览器看到的行为是没有什么比Chrome。如果你使＃footer-logo img 半透明为了查看如何＃footer-logo 正在呈现：

But the behavior you see in other browsers is nothing compared to Chrome. If you make the #footer-logo img semi-transparent in order to get a peek at how #footer-logo is being rendered:

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

Chrome会显示<$> c $ c>＃footer-logo ，直到你搞乱页面缩放。

You'll see that Chrome doesn't even render #footer-logo at all until you mess with the page zoom. Not resize the browser, but zoom the page.

一旦你设法让它渲染，Chrome开始有点行为）像其他浏览器一样，固定＃footer-logo 的宽度。它的不同之处是，当您缩小页面时，图像将不会小于＃footer-logo ，就像它在图像上强制使用最小宽度。

And once you do manage to get it to render, Chrome starts behaving somewhat (only somewhat) like the other browsers, fixing the width of #footer-logo at whatever it was rendered at. Where it differs is that when you scale down the page, the image will not become any smaller than #footer-logo, as though it were forcing a minimum width on the image. Again, this never happens on any of the other browsers.

每次更改页面缩放时，Chrome都会重新绘制＃footer-logo 和图片。

And every time you change the page zoom, Chrome redraws both #footer-logo and the image.

这是我第一次看到一个CSS的边缘情况下，每个浏览器管理展示壮观的错误行为Chrome完全崩溃了，不出意外）。

This is the first time I've seen an edge case in CSS where every browser manages to demonstrate spectacularly buggy behavior (with Chrome just completely falling apart, unsurprisingly).

这篇关于Firefox的麻烦。浮子容器比孩子长吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！