Question

我有以下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本身的内容。看起来这可能根本不可能，但是：

如何在IE8-7中模拟现代transform: scale，以实际调整内部div内容的大小？

也许我正在寻找一些不存在的东西，但我想确定一下。所有测试都是在IE8和IE7的兼容模式下使用IE9完成的（到目前为止，它总是完成这项工作，我不相信它不可靠，但如果您不这么认为，请随时纠正我）

Answer 1

我对你的解释感到有些困惑。 IE7-8中的This fiddle 使用您发布的第一组代码对我内部元素进行缩放（尽管您指出它不是缩放，只是更改位置）。该代码不执行（并且不能执行）的代码是从中心点（从左上角开始）缩放它，并且矩阵变换无法容纳转换（仅"Resizes, rotates, or reverses the content of the object" ），所以它不是“保持相同的中心”，因为你表明你的愿望。

我发现有一个页面与您在执行变换时记下的transformie.js类似，但this other page说明了变换原点居中的问题。最终，为了获得在中心缩放的外观，您必须包含某种计算，以使用position: relative来移动元素。

在this fiddle我通过在包裹width上设置div并在height基础上知道{{1}}，让我自己轻松地进行此类计算内部尺寸。对于任何动态大小调整，这可能会变得复杂，但是the link above我认为使用javascript（JQuery）和sylvester.js动态地进行计算。

Answer 2

您还可以使用IE的缩放属性：

缩放：0.5

这应该做你想做的事。

跨浏览器使用transform的方法：scale css属性？

2 个答案: