html - 背景重复对 FF 42 的奇怪影响

Question

看看这个fiddle :

您会看到一条由拉伸(stretch)的 gif 创建的阴影线。

下面是一个 div，背景只有这个 gif，用 repeat-x 拉伸(stretch)。

FF 导致 gif 垂直重复至少 1 次，尽管没有设置 y 重复。

在 Chrome 和 Safari 上运行完美，一直运行到 FF 41.0.2。

谁能解释一下我做错了什么还是浏览器错误？

html:

<img src="http://www.advertzoom.de/staging/imgs/csh_winstyle/dhxtoolbar_slider_middle.gif" width="300px" height="3px">
<br>&nbsp;
<div class="bgbox"></div>

CSS:

.bgbox {
    background-image: url("http://www.advertzoom.de/staging/imgs/csh_winstyle/dhxtoolbar_slider_middle.gif");
    background-position: center center;
    background-repeat: repeat-x;
    font-size: 1px;
    margin-left: 0px;
    margin-right: 0px;
    border: 1px solid red;
    height: 100px;
    width:300px;
}

编辑

将框的高度从偶数更改为奇数会切换效果。似乎是浏览器错误。

Answer 1

如评论中所述，该问题仅在缩放系数不是 100% 时才可见。显然，OP 的浏览器误以为缩放系数是 100%，而实际上是 125%。 (如屏幕截图所示，300 像素的 div 实际上是 375 像素宽。)

我记得有一次当缩放比例不是 100% 时，Firefox 可能会因为打开或关闭“仅缩放文本”菜单项而感到困惑，但显然情况已不再如此。其他事情正在发生。

因此，尽管 OP 的真正问题(为什么 FF 认为缩放因子不是这样)并没有真正解决，但字面上的问题是，答案是“缩放因子”。它可能与 Firefox v42 无关。