6

我有以下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。

根据此站点，等效的 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报告不同的矩阵值与 scale(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。

编辑：我也试过这个似乎直接来自微软，并建议以下矩阵计算方法：

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 在兼容模式下针对 IE8 和 IE7 完成的（到目前为止，它一直都在完成这项工作，我不认为它不可靠，但如果您有其他想法，请随时纠正我）

4

2 回答 2

4

我对你的解释有点困惑。IE7-8 中的这个小提琴用你发布的第一组代码对我来说缩小了内部元素（尽管你表示它不是缩放，只是改变位置）。该代码没有做（也不能做）的是从中心点缩放它（它是从左上角开始），并且矩阵变换不能适应平移（它只是“调整大小、旋转或反转对象的内容" )，因此它不是您所希望的“保持同一个中心”。

我发现有一个页面与您在执行转换时注意到的transformie.js相似，但另一个页面说明了转换原点居中的问题。最终，要获得在中心缩放的外观，您必须包含某种计算以使用position: relative.

在这个小提琴width中，我通过在包装上设置 adiv并了解height基于内部尺寸的值，让我自己很容易手动进行这样的计算。这可能会因任何动态大小而变得复杂，但我相信上面的链接也提供了使用 javascript (JQuery) 和 sylvester.js 动态进行计算的计算。

于 2012-08-06T19:08:18.563 回答
4

你也可以使用 IE 的 zoom 属性：

缩放：0.5

这应该做你想做的事。

于 2012-08-12T14:44:24.850 回答