量表的iframe内容+ 8

我试图按比例绘制的iframe中所有的浏览器包括IE> = 7的内容，但它不低于9量表的iframe内容+ 8

工作我修改的代码从该柱的尺寸我想我需要并希望在其中放置一个标准的960像素宽的页面。 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/

来源

2013-07-01 BillPull

我可以回答，为什么IE7没有规模可言的问题：

-ms-zoom: 0.5;

上面一行将在IE8中工作，但不是在IE7，因为IE7不承认前缀为-ms-。前缀样式只在IE8中引入。

您可以通过指定zoom样式的未加前缀的版本来解决此问题。但是，这不是完整的答案，因为Chrome和Safari也支持zoom;您可能不想在这些浏览器中使用它，因为您正在使用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);

（以上从here取代码）

另一种选择是使用一个Javascript '填充工具' 库如CSS Sandpaper。该库允许您在旧版IE中使用标准的CSS语法transform，但不支持它。在引擎盖下，它使用与上述相同的filter风格，但通过使用标准代码的能力，它使您的CSS更加整洁。

稍微偏离了原来的问题，但是当我们讨论供应商前缀的主题时，我注意到您还没有指定transform样式的前缀。在使用前缀样式时，重要的是还要指定前缀不变的变体，以便可以通过完全符合标准的浏览器进行选择，并且因为之前使用前缀的浏览器在标准建立后可能会放弃对前缀的支持。

根据您需要的版本支持，您可能实际上已经可以放弃一些前缀属性 - 从版本16开始，firefox不需要它进行转换。您可以在CanIUse.com上看到更多关于此类信息的信息。

希望有所帮助。

来源

2013-07-01 21:30:03 Spudley

量表的iframe内容+ 8

回答

相关问题