Question

我正在尝试在所有浏览器中扩展iframe的内容，包括IE＆gt; = 7但它在9以下不起作用。

我修改了这篇帖子中的代码，我认为我需要的尺寸，并希望在其中放置一个标准的960px宽页面。 How can I scale the content of an 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/

Answer 1

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

-ms-zoom: 0.5;

以上行将在IE8中运行，但在IE7中不起作用，因为IE7无法识别-ms-前缀。仅在IE8中引入了前缀样式。

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

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

另一种选择当然只是放弃对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);

（以上代码来自here）

另一个选择是使用Javascript'polyfill'库，例如CSS Sandpaper。此库允许您在不支持它的旧IE版本中为transform使用标准CSS语法。在引擎盖下，它使用与上述相同的filter样式，但通过使您能够使用标准代码，它可以使您的CSS更加整洁。

略微偏离原始问题，但是当我们讨论供应商前缀时，我注意到您还没有指定transform样式的无前缀版本。使用带前缀的样式时，重要的是还要指定未加前缀的变体，以便完全符合标准的浏览器可以选择它，并且因为先前使用前缀的浏览器可能会在标准建立后放弃对前缀的支持。

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

希望有所帮助。

在IE 7 + 8中缩放iframe内容

1 个答案: