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

Posted 2023-02-16

【中文标题】在 Firefox 中使用 CSS Scale 时，元素保持原始位置

【英文标题】：When using CSS Scale in Firefox, element keeps original position

【发布时间】：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

【参考方案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;