Firefox -moz-transform:scale 缩放图形但占用相同的空间

Question

我通过使用 CSS 缩放图像来调整精灵表上图标的大小。在 Chrome 中它工作正常。Firefox 可以正确缩放图形，但它占用的空间与未缩放版本相同。

我发现-moz-focus-inner它删除了一些填充但似乎没有关系。

我试过在 CSS 中减小图像的大小，但它先裁剪然后缩放，而不是先缩放再裁剪，而且它破坏了 Chrome 的版本。这是在 Firefox 中 :(

我不想添加更多的标签来修复它，例如我可以<i>用 a包裹<span>并将跨度的 CSS 设置为宽度：x 和高度：x 和溢出：隐藏。 我正在寻找一个 CSS 解决方案来解决这个问题，因此无需创建另一个精灵表，无需更改 HTML 和 JS，如果有的话。

<button class="btn"><i class="icon"></i></button>
<button class="btn"><i class="icon icon-small"></i></button>

CSS

.btn, .btn-small{
    border:0;
    background:#000;
    padding:5px;
    margin:5px;
}

.icon{
    width:50px;
    height:50px;
    background-image:url(https://ssl.gstatic.com/gb/images/v1_53a1fa6a.png);
    background-position: -145px -75px;
    background-repeat:no-repeat;
    display:inline-block;

}

.icon-small{
    zoom:0.5;
    -moz-transform:scale(0.5);
    -moz-transform-origin: 0 0;
}

小提琴

Answer 1

从评论延伸：

这就是transform工作原理：修改坐标空间以更改受影响内容的位置和形状，而不会中断正常的文档流。因此，缩放后的元素仍然占用应有的空间，只是“视觉上”缩放了；

zoom另一方面，它是一个 Microsoft 扩展，它实际上缩放对象，导致“对象周围的内容回流”。

Chrome 似乎出于某种原因采用了此属性，但两者并不完全相等。

如果背景图片是独立图片，可以使用background-size: contain跟随缩放；
但对于精灵表，您可以使用“缩小”表background-size，然后重新定位：

/* origin coord: */
.icon{
    width:50px;
    height:50px;
    background-image:url(https://ssl.gstatic.com/gb/images/v1_53a1fa6a.png);
    background-position: -145px -75px;
    background-repeat:no-repeat;
    display:inline-block;
    vertical-align:text-bottom;
}

/* shrinked coord: */
.icon-small-resized{
    width:25px;
    height:25px;
    background-position:-72.5px -37.5px;
    background-size:268px 170.5px;
}

解释：

• 原始工作表宽度为 536px，高度为 341px，因此我将其缩小为宽度为 536/2=268px，高度为 341/2=170.5px，从而将两个尺寸“缩放”为一半；
• 由于两个尺寸均已缩放，因此位置必须从左侧 -145 更改为 -145/2=-72.5px，顶部从 -75 更改为 -75/2=-37.5。

JSFiddle 演示

不过，浏览器如何处理这一问题0.5px并没有什么希望。我在非GPU加速的Firefox XP上进行了测试，背景有一些差距。