在 IE 中无法删除可怕的 iframe 水平滚动条？答案

【问题标题】：Dreaded iframe horizontal scroll bar can't be removed in IE?在 IE 中无法删除可怕的 iframe 水平滚动条？
【发布时间】：2008-09-15 21:49:59
【问题描述】：

我有一个 iframe。内容比我设置的宽度宽，所以 iframe 有一个水平滚动条。我无法增加 iframe 的宽度，所以我只想删除滚动条。我尝试将滚动属性设置为“否”，但这会杀死两个滚动条，我想要垂直滚动条。我尝试将 overflow-x 设置为“隐藏”，这会杀死 ff 中的水平滚动条，但不会在 IE 中。为我难过。

【问题讨论】：

标签： internet-explorer iframe

【解决方案1】：

scrolling="yes"  horizontalscrolling="no" verticalscrolling="yes"

把它放在你的 iFrame 标签中。

您无需在 CSS 中尝试格式化。

【讨论】：

zOMG。虽然水平滚动和垂直滚动属性在 MSDN 上完全没有记录，但这可以解决我的 IE 6 问题。
很好的解决方案，正是我想要的，tyvm。
在 IE10 上遇到问题（是的，我们的客户仍在使用它）我们在 iframe 中显示一些自定义 HTML5 广告。这样做对我们不起作用...

【解决方案2】：

滚动条不是<iframe> 的属性，它是它所包含的页面的属性。尝试将overflow-x: hidden 放在内页的<html> 元素上。

【讨论】：

这个解决方案要好得多，因为它可以保持 iframe 代码轻量并且有利于封装。我不应该记住添加和记住语法。
我同意@DannyG。我们已经超越了标记中呈现属性的时代。出于多种原因，纯 CSS 解决方案更受欢迎。
这是一个更好的解决方案，可让您保持 html 有效

【解决方案3】：

您可以尝试将 iframe 放入 div 中，然后使用 div 进行滚动。您可以毫无问题地控制 IE 中 div 的滚动，IE 只有 iframe 滚动确实存在问题。这是一个可以解决问题的简单示例。

<html>
    <head>
        <title>iframe test</title>

        <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>
        <div id="aTest">
            <iframe src="whatever.html" scrolling="no" frameborder="0"></iframe>
        </div>
    </body>
</html>

【讨论】：

感谢您提供此解决方案。唯一的问题是您必须为 iframe 内容定义一个固定的高度，在我的情况下会有所不同。我将使用它，并且必须为 iframe 指定一个超大的高度，这有点 hacky。但是非常感谢这让我到了那里。

【解决方案4】：

<iframe style="overflow:hidden;" src="about:blank"/>

应该在 IE 中工作。 IE6 在支持overflow-x 和overflow-y 时存在问题。

另外需要注意的是，IE在iframe上的边框只有在camelCase中设置了“frameborder”属性才能被移除。

<iframe frameBorder="0" style="overflow:hidden;" src="about:blank"/>

如果你能用 CSS 正确地设置样式就好了，但它在 IE 中不起作用。

【讨论】：

在我的情况下，我想删除 x 滚动条但不是他 y，我相信设置溢出隐藏将删除两者。我说的对吗？

【解决方案5】：

所有这些解决方案都对我不起作用或不令人满意。使用可滚动的 DIV，您可以使水平滚动条消失，但您将始终拥有垂直滚动条。

因此，对于我可以确保控制所有 iframe 的固定高度的网站，以下解决方案非常有效。它只是用 DIV 隐藏水平滚动条 :)

    <!-- This DIV is a special hack to hide the horizontal scrollbar in IE iframes -->
<!--[if IE]>
<div id="ieIframeHorScrollbarHider" style="position:absolute; width: 768px; height: 20px; top: 850px; left: 376px; background-color: black; display: none;">
</div>
<![endif]-->
<script type="text/javascript">
  if (document.getElementById("idOfIframe") != null && document.getElementById("ieIframeHorScrollbarHider") != null)
  {
    document.getElementById("ieIframeHorScrollbarHider").style.display = "block";
  }
</script>

【讨论】：

【解决方案6】：

您还可以尝试将 iframe 中包含的页面正文的宽度设置为 99%。

【讨论】：