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

Question

在Firefox中使用缩放时,缩放元素dóes可以正确缩放.问题是,它的定位好像没有缩放.

这适用于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中):

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

Answer 1

正如thirtydot提到的:

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

这样就可以了.

Answer 2

我添加了-transform-origin:0 0; 它仍然无法正常工作.

不知何故,它在Chrome中折叠为-webkit-transform-origin:0;

所以我把它改成了-transform-origin:左上角; 它现在工作正常.

完整代码:

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