使用transform：scale css屬性的跨瀏覽器方法？

我有以下的CSS規則：使用transform：scale css屬性的跨瀏覽器方法？

-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */ 
    -moz-transform: scale(0.5); /* FF3.5+ */ 
     -ms-transform: scale(0.5); /* IE9 */ 
     -o-transform: scale(0.5); /* Opera 10.5+ */ 
      transform: scale(0.5);

我打算同時保持相同的中心，以它的規模，包括其所有內容，圖像等，適用於一個div至50％的大小。正如你可能知道我列出的規則完全一樣，除了IE7-8。

據this site，等效，MS專有的規則是：

/* IE8+ - must be on one line, unfortunately */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand')"; 

    /* IE6 and 7 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(
      M11=0.5, 
      M12=0, 
      M21=0, 
      M22=0.5, 
      SizingMethod='auto expand');

然而，這些似乎並沒有真正調整div的內容，它似乎改變其位置，但僅此而已。

CSS3Please.com報告不同的矩陣值成爲分的當量（0.5）：

filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
        M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');

我測試這些藏漢，但效果是一樣的;該div似乎改變了立場，但其內容的實際大小保持不變。

最後，我已經試過transformie.js，它通過sylvester.js自動計算矩陣分配變換屬性，但最終的結果仍然是：

M11=0.5, M12=0, M21=0, M22=0.5

完全一樣的一個我第一次嘗試，這看起來除了改變div的位置外別無所求。

我會嘗試cssSandpaper.js，但它看起來很臃腫什麼我打算做的，再加上有沒有jQuery的端口，我不喜歡加入cssQuery該項目只爲。結果可能與transformie.js生成的結果相同，因爲它似乎也使用sylvester.js。

編輯：我也試着this這似乎直接來自微軟，並提出以下矩陣的計算方法：

function resizeUsingFilters(obj, flMultiplier) { 
    // If you don't do this at least once then you will get an error 
    obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"; 
    // Resize 
    obj.filters.item(0).M11 *= flMultiplier; 
    obj.filters.item(0).M12 *= flMultiplier; 
    obj.filters.item(0).M21 *= flMultiplier; 
    obj.filters.item(0).M22 *= flMultiplier; 
}

不幸的是，這並不縮放DIV本身的內容無論是。看起來這可能根本不可能，但是：

現代transform: scale如何在IE8-7中模擬，以這種方式實際調整內部div內容？

也許我正在尋找一些不存在的東西，但我想確定。所有的測試都是在IE9和IE7的兼容模式下完成的（到目前爲止它一直都是這樣做的，我不相信它不可靠，但如果你不這麼認爲，請隨時糾正我）

來源

2012-07-30 Mahn

[Modernizr]（http://modernizr.com/）是否支持？ [也許]（http://modernizr.com/docs/#csstransforms）？ – 2012-07-30 01:26:26

@JaredFarrish Afaik（但如果我錯了，有人可能會糾正我，因爲我還沒有使用它）所有Modernizr都會測試是否支持轉換，並讓你知道，但如果缺少支持該怎麼辦取決於用戶。 – Mahn 2012-07-30 02:02:00

我沒有使用Modernizr，但從我所瞭解的情況來看，這似乎並不是用例。那有什麼意義呢？ – 2012-07-30 02:03:42

我是你的解釋有點困惑。 This fiddle在IE7-8 縮放內部元素下來我很好，你發佈的第一組代碼（雖然你指出它不是縮放，只是改變位置）。不是做的（不能做的）代碼是從中心點（它是從左上角）開始縮放的，並且矩陣變換不能容納翻譯（它只有"Resizes, rotates, or reverses the content of the object"），所以它不是「保留同樣的中心「，你表示你的願望。

有一個頁面我發現類似於transformie.js您在執行轉換時注意到，但this other page說明轉換原點居中的問題。最終，爲了獲得中心縮放的外觀，您必須包含某種計算，以便使用position: relative進行元素移位。

在this fiddle我做了它容易對自己被設置在包裝div一個width以及基於內部尺寸知道height做手工這樣的計算。這可能會變得複雜與任何動態的大小，但the link above我相信給計算做動態使用JavaScript（JQuery）與sylvester.js以及。

來源

2012-08-06 19:08:18 ScottS

嗯，有趣。事實上，你的小提琴工作正常。我要調查爲什麼它不能使它與我的頁面一起工作，當然我一定忽略了一些... – Mahn 2012-08-06 19:50:19

所以我通過jQuery再次實現了它，它的確在工作，雖然可悲的難以承受， 100s）元素集，我猜這就是我認爲它第一次不能正常工作的原因。我仍然不得不離開IE7-8，因爲我懷疑它可以以某種方式加速......哦。 – Mahn 2012-08-06 20:26:12

您還可以使用IE的zoom屬性：

變焦：0.5

這應該做你想要做的事。

來源

2012-08-12 14:44:24

我意識到縮放，但它非常緩慢，比轉換更慢：在大多數瀏覽器中縮放，這就是我很快拋棄它的原因。雖然謝謝！ – Mahn 2012-08-12 20:40:47

使用transform：scale css屬性的跨瀏覽器方法？

回答

相關問題