在 iFrame 中缩小文本/内容而不创建额外的空白答案

【问题标题】：Having text / content scale down in an iFrame without creating extra white space在 iFrame 中缩小文本/内容而不创建额外的空白
【发布时间】：2012-12-06 23:41:09
【问题描述】：

我的网站上有一个 iframe 浏览器实例，我已经缩减了使用从这个question 找到的答案的内容。我注意到因为我使用的是 CSS 缩放和变换属性，我的 iframe 浏览器实例周围有额外的空白。填充的 iframe 加上它周围的空白包含我的 iframe 的原始宽度和高度（在通过变换和缩放缩小之前）。

结果如下：

请注意，灰色突出显示的部分是页面的原始非 iframe 部分。 iframe 是页面中未突出显示的部分。在原始 iframe 内，有缩小的浏览器实例和它周围的额外空白。

摆脱这个空白的最佳方法是什么，或者有什么不同的方法来缩小我的 iframe 以便不创建额外的空白？

这是我当前的 CSS：

#iframe {
    width: 800px; 
    height: 800px; 
    border; 1px solid black; 
    zoom: 1.00; 
    -moz-transform: scale(0.65); 
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.65); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.65); 
    -webkit-transform-origin: 0 0;
}

和 HTML：

<iframe id = 'iframe' src = 'http://www.wsj.com'></iframe>

谢谢！

【问题讨论】：

标签： css html iframe

【解决方案1】：

我创建了一个包含 iFrame 的 Div。 Div 充当 iFrame 的限制性边界，并消除了多余的空白。

CSS：

#iframe {
    width: 1100px; 
    height: 1000px; 
    border: 1px solid black; 
    zoom: 1.00; 
    -moz-transform: scale(0.65); 
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.65); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.65); 
    -webkit-transform-origin: 0 0;
}
#iframetest {
    width: 715px; 
    height: 650px; 
    margin: 10px; 
    border-style: solid; 
    border-width: 10px;
}        
#iframetest a {
    position: absolute; 
    top: -16px; 
    right: -16px;
}

HTML:

echo "<div id = 'iframetest' style = 'display: none'>
          <iframe id = 'iframe' src = 'http://www.wsj.com'></iframe>
          <a href = 'javascript: closeiframe();'><img src = 'images/exitbutton.png' 
           width = '22px' height = '22px'>
          </a>
      </div>";

【讨论】：

错字：moz-transform-orgin -> moz-transform-origin

【解决方案2】：

此代码使整个页面嵌入，但您可以调整宽度和高度

<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>

<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.wsj.com" style="width:100%;height:100%"></iframe>
</body>

【讨论】：