在Firefox中使用CSS Scale时，元素保持原始位置 [英] When using CSS Scale in Firefox, element keeps original position

问题描述

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

这在Chrome中可以正常工作，也可能在IE，Safari和Opera。这些浏览器都支持CSS zoom属性，而Firefox不支持。对于Firefox我使用-moz-transform：scale（0.3）;。

这是我的CSS：

  #overview .page-content {
 zoom：0.3; 
 -moz-transform：scale（0.3）; 
} 
  

这应该是什么样子>

这是它不应该看起来像（如在Firefox中）：

有人知道如何解决这个问题吗？

解决方案

由于 thirtydot 提到：

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

这将会做到。

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):

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

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

解决方案

As thirtydot mentioned:

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

This will do the trick.

这篇关于在Firefox中使用CSS Scale时，元素保持原始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！