Question

我试图让跨浏览器的css缩放工作，但我在这里找到的所有东西都不适合我。

这就是我所拥有的：

HTML

<div id="themeframe">
<div class="themeframe-overlay"></div>
<iframe src="/index.php"></iframe>
</div>

CSS

#themeframe{
position:relative;
width:520px;
height:400px;
margin-top: 20px;
border: none;
overflow: hidden;
}

#themeframe .themeframe-overlay{
position:absolute;
z-index:95;
left:0;top:0;
height:100%;width:100%;
background:#fff;
opacity:0;
filter: alpha(opacity = 0);
}


#themeframe iframe {
width:1040px;
min-height: 800px;
overflow: hidden;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
-ms-transform: scale(0.5);
-ms-transform-origin: 0 0;
margin: 0;
padding:0;
border: none;
}

我想要实现的目标是什么？ 我有一个520 x 400 div，我想要填充50％缩放版本的网页。如上所示，我在IE中遇到问题，其中div / iframe的大小正确，但内部的网页是100％，而不是50％。这适用于所有其他浏览器。如果我添加zoom：0.5;到iframe css，它在IE中修复它，但在chrome中打破它。

我无法同时在IE，Chrome，Safari和Firefox中使用它。

有什么想法吗？

Answer 1

找到答案，至少对我有用。部分答案是在found here.

步骤之后使用的

首先，像这样安排 HTML （我不擅长在此网站上安排代码）：

<div id="themeframe">
    <iframe src="/index.php" id="frame" width="794" height="1550"></iframe >
</div>

然后 CSS 看起来像这样：

#themeframe {
    overflow: hidden;
    position: relative;
    width:800px;
    height:850px;
    -ms-zoom: 0.75;
}


#frame {
    position: absolute;
    overflow-x: hidden;
    top: -300px;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;

我要指出的变化是：

我将iframe包裹在名为div的{{1}}
我给了themeframe一个iframe，因此我们可以在CSS中设置样式。
我在id的包装div上使用-ms-zoom而不是themeframe。这是因为IE会将整个iframe缩放到您设置的iframe大小，而不是其中的内容（Chrome和Firefox会这样做）。在CSS中使用zoom也很重要，而不仅仅是-ms-zoom，因为Chrome会发疯并注意zoom和zoom如果你不做-webkit区别。

希望这会有所帮助。它适用于Chrome，FF和IE8。

iframe缩放问题

1 个答案: