我有一个iframe。 内容比我设置的宽度要宽,因此iframe会获得水平滚动条。 我无法增加iframe的宽度,所以我只想删除滚动条。 我尝试将scroll属性设置为" no",但是这会杀死两个滚动条,而我想要垂直滚动条。 我尝试将overflow-x设置为" hidden",这杀死了ff中的水平滚动条,但没有杀死IE中的水平滚动条。 为我难过。
1
| scrolling="yes" horizontalscrolling="no" verticalscrolling="yes" |
将其放入您的iFrame代码中。
您无需费心尝试在CSS中设置格式。
滚动条不是的属性,而是它包含的页面的属性。尝试将overflow-x: hidden放在内页的元素上。
您可以尝试将iframe放入div中,然后使用div进行滚动。您可以在IE中控制div上的滚动而不会出现问题,IE仅在iframe滚动方面确实存在问题。这是一个可以解决问题的简单示例。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <html>
<head>
iframe test
<style>
#aTest {
width: 120px;
height: 50px;
padding: 0;
border: inset 1px #000;
overflow: auto;
}
#aTest iframe {
width: 100px;
height: 1000px;
border: none;
}
</style>
</head>
<body>
<iframe src="whatever.html" scrolling="no" frameborder="0"></iframe>
</body>
</html> |
您也可以尝试将iframe中包含的页面正文的宽度设置为99%。
所有这些解决方案都对我不起作用或不令人满意。使用可滚动的DIV,您可以使水平滚动条消失,但那时总会有垂直滚动条。
因此,对于我可以确定控制所有iframe固定高度的网站而言,以下解决方案效果很好。
它只是用DIV隐藏了水平滚动条:)
1 2 3 4 5 6 7 8 9 10
| <!-- This DIV is a special hack to hide the horizontal scrollbar in IE iframes -->
<!--[if IE]>
<![endif]-->
<script type="text/javascript">
if (document.getElementById("idOfIframe") != null && document.getElementById("ieIframeHorScrollbarHider") != null)
{
document.getElementById("ieIframeHorScrollbarHider").style.display ="block";
} |
1
| <iframe style="overflow:hidden;" src="about:blank"/> |
应该在IE中工作。 IE6在支持overflow-x和overflow-y时遇到问题。
要注意的另一件事是,只有在camelCase中设置" frameborder"属性,才能删除IE在iframe上的边框。
1
| <iframe frameBorder="0" style="overflow:hidden;" src="about:blank"/> |
如果您可以使用CSS正确设置样式,但它在IE中不起作用,那就太好了。