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

在Firefox中使用缩放时，缩放元素会正确缩放。问题是，它的定位就好像它没有缩放。当在Firefox中使用CSS 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); 
}

这是它应该是什么样子（如铬）：

zoom in chrome

这是不应该的样子（如Firefox）： scale in firefox

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

来源

2011-11-02 Thomas

+15

添加'位置：absolute'和'-moz-变换原点：0 0'可能的帮助。 – thirtydot

这个伎俩！感谢：D – Thomas

由于thirtydot提到：

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

这将这样的伎俩。

来源

2011-12-06 09:01:58 borisrorsvort

感谢您发布此内容 - 您不希望看到我正在尝试重新定位缩放后的元素的数学计算！ – jstafford

如果我需要扩展整个身体，那么解决方案是什么？ – SachinKRaj

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

E.g.这帮助我获得了与客户徽标在不同屏幕分辨率下良好匹配的排名。

来源

2013-09-17 13:40:43 stackasec

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

来源

2014-09-18 08:01:50 scabbiaza

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

回答

相关问题