當在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時，元素保持原始位置

回答

相關問題