IE8、iframe 和不必要的滚动条
对于我正在进行的一项开发,我需要动态创建一个 Iframe,其中包含一些动态内容(通常是图像 - 图像源是动态的,但尺寸是固定的)。我不需要任何滚动条出现在 iframe 上,这就是我所做的。
<iframe id="xxxx" width="70px" height="70px" style=" scrolling: no" src="content.html">
</iframe>
//content.html
<body>
<div style="height: 100%; width: 100%; overflow: hidden">
<img id="imgDiv" src="" style="height: 100%; width: 100%; ">
</div>
</body>
我还在 iframe 上尝试过“溢出:隐藏”,但观察到类似的行为。
这在 FF / Chrome / Safari 中工作正常,但在 IE8 中不行!
显然,即使指定不需要滚动条,IE 也会为滚动条保留一些空间?右侧渲染了一个空白区域,使得图像看起来没有居中对齐。在像我需要的那样小的 iframe 中,它看起来真的很难看。
有什么办法可以解决这种行为吗?
For a piece of development I am doing, I need to dynamically create an Iframe with some dynamic content in it (typically an image – the image source is dynamic but the dimensions are fixed). I don’t need any scrollbars to appear on the iframe, and this is what I have done
<iframe id="xxxx" width="70px" height="70px" style=" scrolling: no" src="content.html">
</iframe>
//content.html
<body>
<div style="height: 100%; width: 100%; overflow: hidden">
<img id="imgDiv" src="" style="height: 100%; width: 100%; ">
</div>
</body>
I have also tried “overflow : hidden” on the iframe but observed similar behavior.
This works all right in FF / Chrome / Safari but not in IE8!
Apparently IE reserves some space for scroll bars even after specifying that the scrollbars are not needed? An empty space is rendered on the right hand side making it look like the image is not centre aligned.. It looks really ugly in an iframe as small as the one I need here..
Is there any way around this behavior?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

在 iframe 的声明中,将样式属性 style="scrolling: no" 更改为 scrolling="no"
Result:
< iframe id =“xxxx”宽度=“70px”高度=“70px”滚动=“否” src =“content.html”>
In the declaration of the iframe, change the style attribute style=" scrolling: no" for scrolling="no"
Result:
< iframe id="xxxx" width="70px" height="70px" scrolling="no" src="content.html" >