在 Firefox 中使用 CSS Scale 时，元素保持原始位置答案

【问题标题】：When using CSS Scale in Firefox, element keeps original position在 Firefox 中使用 CSS Scale 时，元素保持原始位置
【发布时间】：2011-12-20 07:21:53
【问题描述】：

在 Firefox 中使用 scale 时，被缩放的元素会正确缩放。问题是，它的位置好像没有缩放。

这在 Chrome 中运行良好，在 IE、Safari 和 Opera 中也可能。这些浏览器都支持 CSS 缩放属性，而 Firefox 不支持。对于 Firefox，我使用 -moz-transform: scale(0.3);.

这是我的 CSS：

#overview .page-content {
    zoom: 0.3;
    -moz-transform: scale(0.3);
}

这应该是它的样子（就像在 Chrome 中一样）：

这是它不应该的样子（就像在 Firefox 中一样）：

有人知道如何解决这个问题吗？或者也许是一种解决方法？

【问题讨论】：

添加 position: absolute 和 -moz-transform-origin: 0 0 可能会有所帮助。
成功了！谢谢：D

标签： css firefox zooming scale

【解决方案1】：

正如thirtydot 提到的：

position: absolute;
-moz-transform-origin: 0 0;

这样就可以了。

【讨论】：

感谢您发布此内容 - 您不想看到我试图在缩放后重新定位元素的数学运算！
如果我需要缩放整个身体，那么解决方案是什么？

【解决方案2】：

如果绝对定位不是一个选项 - 并且知道相应的浏览器支持 - display: table-cell 与 min-width 定义，应该需要，也可以做到这一点。

例如这帮助我在不同的屏幕分辨率下很好地缩放客户徽标。

【讨论】：

【解决方案3】：

我添加了 -transform-origin: 0 0;还是不行。

不知何故在 Chrome 中它崩溃到 -webkit-transform-origin: 0;

所以我把它改成了 -transform-origin: top left;现在可以正常使用了。

完整代码：

-moz-transform: scale(50%);
-moz-transform-origin: top left;
-o-transform: scale(50%);
-o-transform-origin: top left;
-webkit-transform: scale(50%);
-webkit-transform-origin: top left;

【讨论】：