我的网站上有一个 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>
谢谢!
最佳答案
我创建了一个 Div 来包含 iFrame。 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>";
关于css - 在不创建额外空白的情况下在 iFrame 中缩小文本/内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13955463/