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

发布于 2024-12-13 07:14:05 字数 540 浏览 2 评论 0原文

在 Firefox 中使用缩放时，缩放后的元素确实会正确缩放。问题是，它的定位就好像没有缩放一样。

这在 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 中）：

zoom in chrome

这就是它应该的样子看起来不像（如在 Firefox 中）： scale in firefox

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

原文

When using scale in Firefox, the scaled element dóes get scaled properly. The problem is, that it's positioned as if it isn't scaled.

This works fine in Chrome, and probably also in IE, Safari and Opera. These browsers all support the CSS zoom property, where Firefox doesn't. For Firefox I'm using -moz-transform: scale(0.3);.

This is my CSS:

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

This is what it should look like (as in Chrome):

zoom in chrome

This is what it shouldn't look like (as in Firefox):
scale in firefox

Does anybody know how to fix this? Or maybe a workaround?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谜兔 2024-12-20 07:14:05

正如 thirtydot 提到的：

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

这可以解决问题。

As thirtydot mentioned:

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

This will do the trick.

回复收藏 0 原文

み青杉依旧 2024-12-20 07:14:05

我添加了 -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;

I added -transform-origin: 0 0; and it still did not work.

Somehow in Chrome it collapsed to -webkit-transform-origin: 0;

So I changed it to -transform-origin: top left; and it works fine now.

Full code:

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

回复收藏 0 原文