火狐浏览器 -moz-transform:scale 可以缩放图形但占用相同的空间。

Question

我正在使用CSS缩放图像来调整雪碧图上的图标大小。在Chrome中它可以正常工作，但是在Firefox中，虽然图形被正确地缩放了，但它占用的空间与未缩放版本相同。

我发现 -moz-focus-inner 可以去除一些填充，但似乎与此无关。

我尝试在CSS中减小图像的大小，但它会先裁剪再缩放，这会破坏Chrome的版本。这是在Firefox中的效果 :( 我不想添加更多的标记来修复它，例如，我可以使用 <span> 包装 <i> 并将 span 的CSS设置为 width:x 和 height:x 并且 overflow:hidden。 我正在寻找一个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;
}

Fiddle

- Popnoodles

---

这就是 transform 的工作原理。如果你用 -webkit-transform 替换 zoom，你会得到相同的结果：http://jsfiddle.net/Qg794/2/。 - Passerby

好的，谢谢。但我需要知道相反的是什么！ - Popnoodles

PS：Firefox很久以前就采用了非前缀版本：http://caniuse.com/#feat=transforms2d，而WebKit仍需要供应商前缀。而且我认为“缩放”是IE专有属性。Chrome出于某种原因采用了它，但它并不等同于“transform:scale”。 - Passerby

这个可以运行：http://jsfiddle.net/Qg794/4/ 但在没有GPU加速的Firefox XP中，渲染结果并不完美，<i> 的某些边缘有一些间隙。我猜 0.5px 对于浏览器来说是棘手的。 - Passerby

@Passerby，那比较好了，谢谢。你想发表一个答案来获得一个漂亮的大绿勾吗？ - Popnoodles

Answer 1

从评论中延伸出来的内容：

这就是 transform 的工作方式：修改坐标空间以改变受影响内容的位置和形状而不破坏正常文档流。因此，缩放的元素仍然占据应有的空间大小，只是在视觉上被缩放；

zoom则是微软的扩展，实际上会缩放对象，导致“围绕对象的内容重新布局”。

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;
}

解释：

• 原始图表宽度为536像素，高度为341像素，因此我将其缩小至536/2=268像素宽，341/2=170.5像素高，从而将两个尺寸“缩小”一半；
• 由于两个尺寸都被缩放，所以位置必须从-145更改为-145/2=-72.5像素向左，从-75更改为-75/2=-37.5像素向上。

JSFiddle演示

然而，浏览器处理0.5像素的方式并不理想。我在一个非GPU加速的Firefox XP上进行了测试，发现背景有一些间隙。

- Passerby