2

我正在尝试在包括 IE >= 7 在内的所有浏览器中缩放 iframe 的内容，但它在 9 以下不起作用。

我修改了这篇文章中的代码，调整了我认为需要的尺寸，并希望在其中放置一个标准的 960px 宽页面。 如何缩放 iframe 的内容？

http://www.carsonfarmer.com/2012/08/cross-browser-iframe-scaling/

        #wrap {
            width: 410px;
            height: 426px;
            padding: 0;
            overflow: hidden;
            border:1px solid #ccc;
            box-shadow: 0px 0px 3px #333;
        }
        #frame {
            -ms-zoom: 0.5;
            -ms-transform-origin: 0 0;
            -moz-transform: scale(0.5);
            -moz-transform-origin: 0px 50px;
            -o-transform: scale(0.5);
            -o-transform-origin: 0px 50px;
            -webkit-transform: scale(0.5);
            -webkit-transform-origin: 0 0;
        }
        #frame {
            width: 950px;
            height: 1000px;
            border: 0;
            overflow: hidden;
        }

在 IE 8 中，内容对于容器来说太小了，我得到了一些滚动条。在 IE 7 中，内容没有缩放。

http://jsfiddle.net/t2GPm/

4

1 回答 1

1

我可以回答为什么 IE7 根本无法扩展的问题：

-ms-zoom: 0.5;

上面的行在 IE8 中可以工作，但不能在 IE7 中工作，因为 IE7 不能识别-ms-前缀。前缀样式仅在 IE8 中引入。

zoom您可以通过指定样式的无前缀版本在 IE7 中解决此问题。但是，这不是完整的答案，因为zoomChrome 和 Safari 也支持；您可能不想在这些浏览器中使用它，因为您正在使用transform它们。

是的，这是一个复杂的问题。鉴于上述情况，您最好的选择是使用条件注释来使zoom属性特定于 IE（有多种方法可以实现这一点）。

当然，另一种选择就是放弃对 IE7 的支持。坦率地说，这不是一个坏主意。它有很多重大问题，并且用户数量正在迅速减少。（我最近看到的所有统计数据都说它现在的用户比 IE6 少）

更一般地说，重要的是要知道这zoom与使用transform. zoom实际上并不缩放元素；它放大它。区别很微妙，但确实有所不同，特别是与被缩放/缩放的框周围的元素布局有关，并且可以解释您在 IE8 中遇到的滚动条问题。

因此，zoom实际上可能不是您想要做的。您使用它是因为旧 IE 版本不支持transform，但是还有其他方法可以让旧 IE 版本缩放元素。一种选择是使用专有filter样式。它并不漂亮，但它可能更适合你想要做的事情。试试这个：

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=1.5320888862379554, M12=-1.2855752193730787,
    M21=1.2855752193730796, M22=1.5320888862379558);

（以上代码取自此处）

另一种选择是使用 Javascript 的“polyfill”库，例如CSS Sandpaper。transform该库允许您在不支持它的旧 IE 版本中使用标准 CSS 语法。在底层，它使用与filter上述相同的样式，但通过让您能够使用标准代码，它使您的 CSS 更加整洁。

稍微偏离最初的问题，但是当我们讨论供应商前缀的主题时，我注意到您也没有指定transform样式的无前缀版本。使用带前缀的样式时，还必须指定不带前缀的变体，以便完全符合标准的浏览器可以使用它，并且因为一旦标准建立良好，以前使用前缀的浏览器可能会放弃对前缀的支持。

根据您需要的版本支持，您实际上可能已经能够删除一些前缀属性 - firefox 从版本 16 开始就不需要它来进行转换。您可以在CanIUse.com上查看有关此类事情的更多信息。

希望有帮助。

于 2013-07-01T21:30:03.590 回答