html - CSS:背景大小:封面； Firefox18 中的奇怪行为 - 它附加到父绝对定位元素的父相对定位元素

Question

今天我发现 Firefox 18.0.2 有一个奇怪的行为。即使更新到 FF19.0 也无济于事。

我需要创建具有动态大小并保持特定纵横比的缩略图。可能还有其他更好的解决方案，如下所示。

Html: - Doctype 是 HTML5

<div class="img">
   <img alt="" src="/blank.gif" class="imgScalar">
   <div class="imgA">
       <div class="imgP">
           <div style="background-image:url(-pathToThumb-)" class="thumb"></div>
       </div>
   </div>
</div>

“blank.gif”的固定大小为 2x2px。具有相同的边长很重要。

CSS:

.img {
    position: relative;
    overflow: hidden;
    margin: 1px 0;
}
.img .imgScalar {
    width: 100%;
}
.img .imgA {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url('../gfx/loader.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.img .imgP {
    padding: 0 1px;
    height: 100%;
    overflow: hidden;
}
.img .thumb {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.img .imgScalar,
.img.r16-9 .imgScalar {
    margin-bottom: -43.75%;
}
.img.r16-10 .imgScalar {
    margin-bottom: -37.5%;
}
.img.r4-3 .imgScalar {
    margin-bottom: -25%;
}
.img.r9-16 .imgScalar {
    margin-bottom: 77.77777777777777%;
}
.img.r10-16 .imgScalar {
    margin-bottom: 60%;
}
.img.r3-4 .imgScalar {
    margin-bottom: 33.333333333333314%;
}

---

对我来说好处是，我可以在点击@media 规则时通过 CSS 切换纵横比。

@media (max-width: 767px) {
    .img.r9-16 .imgScalar,
    .img.r10-16 .imgScalar,
    .img.r3-4 .imgScalar {
        margin-bottom: -25%;
    }
}

作为信息:它集成在一个布局中，该布局默认为静态宽度为 1200 像素，如果分辨率低于 1200 像素并且客户端浏览器支持规则并且也会对移动分辨率使用react - 一切仅 CSS。

我已经在 Google Chrome、Opera、Safari、Internet Explorer 和我的 iPhone 上测试了上述内容，它似乎可以在这些经过测试的设备上运行……唯一能做到这一点的浏览器是 Firefox。

似乎是什么问题:

因为 .thumb 是 .imgA 的子元素，它是绝对定位的，背景大小似乎应用于 的下一个相对父元素.imgA 而不是 .thumb 本身也是相对定位的。出于测试目的，我还使 .imgP 成为相对对象，但这也无济于事。

---

临时解决方案:

HTML:

<div class="img">
    <div class="imgWrap">
        <img alt="" src="/iS16-9.gif" style="background-image:url(-imgPath-)" class="imgScalar">
    </div>
</div>

iS16-9.gif 是用作“辅助”元素的几个空白图像之一。顾名思义，它的宽度为 16px，高度为 9px，以表示纵横比。

CSS:

.img > .imgWrap {
    position: relative;
    margin: 1px;
    background-image: url('../gfx/loader.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.img > .imgWrap > img {
    width: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

很遗憾，我现在无法在不使用 javascript 组件的情况下响应不断变化的分辨率。

---

也许你们中的一些人知道如何解决这个问题？

---

//编辑:我检查了哪些浏览器不兼容第一个解决方案:

• 火狐
• 冰鼬
• 风发 0.5.8
• 冰峰
• 海猴

除了 MSIE5.5 以外的任何其他浏览器都没有问题 - 即使 MSIE6.0 似乎也能处理这个问题。只有基于 mozilla 的浏览器在所有版本中都完全失败(即使是我见过的 20 个)

Answer 1

经过几个小时的调试，我已经能够自己解决问题。感谢@IgorJerosimic 插入我在 jsfiddle 上发布示例。发布我的示例后，我能够看到，代码本身完全按照它应该做的去做。

问题与缩放的方式无关。事实上，它导致了我的 css-grid-system 在处理列时的行为方式。我没有使用 float，而是需要使用 inline-block，这有点棘手 - Firefox2.0 的旧回退导致了崩溃。

display: inline-block;
display: -moz-inline-grid;
vertical-align: top;
min-height: 1px;

删除弃用的行 display: -moz-inline-grid; 后一切又恢复正常了。 (该代码最初来自德语页面 http://bittersmann.de/articles/inline-block/example9.html )

第一个解决方案是跨浏览器兼容，甚至下到MSIE6.0(如果你添加背景缩放功能的过滤规则，否则图像按比例格式化但不放大或缩小)。不可否认，所需的代码量有点重......但到目前为止，这是我制作响应式自动缩放图像框的唯一解决方案，例如用于固定比例的拇指预览并避免图像周围出现黑色条纹。

---

如何优化？

从现在开始，问题是如何最好地优化第一个示例的代码以避免过多的流量。如果我比较两个样本，第一个样本和第二个样本之间的大小相差 26%。在具有 250 个缩略图的图库中，第一个示例将产生 12.250 个字符的开销。根据 UTF-8 字符集计算，这将是(如果我计算正确的话)11.9kB 的流量或对于具有 30kB 下行链路的慢速“DSL”，每个请求的差异为 0.399 秒。

---

谨此致以诚挚的问候，希望这对可能面临此问题的人有所帮助，

多米尼克·哈比希茨伯格