使用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属性的跨浏览器方法？

回答

相关问题