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 回答