1

我正在尝试让跨浏览器 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%。这适用于所有其他浏览器。如果我添加缩放：0.5; 到 iframe css，它在 IE 中修复它，但在 chrome 中破坏它。

我无法让它同时在 IE、Chrome、Safari 和 Firefox 中运行。

有什么想法吗？

4

1 回答 1

1

找到了答案，这至少对我有用。此答案的一部分是按照此处找到的步骤使用的。

首先，像这样安排你的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;

我要指出的变化是：

  1. 我把它包裹iframe在一个div叫themeframe

  2. 我给出了iframe一个id，所以我们可以在 CSS 中设置它的样式。

  3. 我-ms-zoom在包装 div 上使用了themeframe不在iframe. 这是因为 IE 会将整个 iframe 缩放到您设置的zoom大小，而不是其中的内容（Chrome 和 Firefox 就是这样做的）。在 CSS中使用也很重要，-ms-zoom而不仅仅是zoom因为 Chrome 会发疯并注意两者zoom，-webkit如果你不ms区分。

希望这可以帮助。它适用于 Chrome、FF 和 IE8。

于 2012-08-14T19:30:05.183 回答