0

重新缩放 iFrame 内容适用于 Chrome，但不适用于其他浏览器。有什么解决办法吗？我想要一个跨浏览器解决方案，用于重新缩放 iframe 以放置表单。

它不会在 IE8 和 Firefox 15.0.1 中重新缩放。它在这些浏览器中显示为 100%，但在 Chrome 中减少了。有什么想法吗？

<iframe src="http://www.apple.com/"
frameborder="0" noresize="noresize" scrolling="no"
width="66%" margin: 0 auto; align= "left "seamless="seamless"style="
-webkit-transform:scale(0.5);-moz-transform-scale(0.5);
width: 400px; height: 400px;"></iframe>

http://jsfiddle.net/DisEngaged/t9yhm/

4

1 回答 1

2

您犯了一个小错字/对 Firefox 使用了错误的语法。您使用了 a-而不是 a :。

现场示例：http: //jsfiddle.net/t9yhm/3/

代替：

-moz-transform-scale(0.5);

它应该是：

-moz-transform:scale(0.5);

另外，值得注意的是，最新版本的 Firefox 支持无前缀版本：

transform:scale(0.5);

编辑 ：

抱歉，我刚刚注意到您想要一个“跨浏览器”解决方案。下面的 CSS3 将支持最新版本的 Firefox、Chrome 和 IE9+：

iframe{
    width: 400px;
    height: 400px;
    margin: 0 auto;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

对于 IE8 及以下版本，您可以使用一个过滤器，但它的语法很复杂：

/* IE8+ - must be on one line*/ 
-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');

为了帮助您计算矩阵值，您可以使用此站点：http ://www.useragentman.com/IETransformsTranslator/

于 2013-01-21T22:13:27.527 回答