overflow:hidden;在Chrome中对IFRAME无效？

Question

我有一个包含CSS和HTML的IFRAME，其中overflow被隐藏。它在Firefox中有效，但在Chrome / Safari中无效。

为什么会这样？

- dukevin

Answer 1

< p >好的，那么怎么样：

<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>

就像在scrolling="no"中一样。

http://jsfiddle.net/neSBS/

- Joonas

---

做到了，谢谢！而且你有一段时间没有使用 iframe 的原因是...（它们很难处理）。 - dukevin

scrolling 属性在 HTML5 中已被弃用，且该属性在 HTML5 中无效。 - matewka

@matewka https://dev59.com/1G445IYBdhLWcg3wiq8i - Joonas

@Joonas 是的，我知道。但是如果内容文档不适合iframe，seamless属性无法隐藏滚动条。目前，在最新版本的Chrome浏览器和HTML5文档中，没有办法管理iframe中的滚动条。滚动属性不起作用，CSS溢出也不起作用。后者可能是浏览器的一个bug。 - matewka

那么仅隐藏水平滚动条呢？ - Soullivaneuh

Answer 2

我进行了相当广泛的调研，现在我想发表我的答案，并建议这可能是对Joonas的答案的补充：

<style>
    iframe {
        overflow:hidden;
    }
</style>
(...)
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>

我认为应提供scrolling和overflow:hidden，尽管这种解决方案在Chrome和HTML5 doctype组合中不起作用。scrolling属性在HTML5中已弃用，在Chrome中，overflow属性不会影响iframe。我认为后者是一个错误，因为HTML5规范明确说明：

此外，HTML5没有现有的呈现属性，它们在HTML4中用作CSS更好地处理其功能：
(...)
- td和th上的nowrap属性
- 表上的rules属性
- iframe上的scrolling属性
- hr上的size属性
- li和ul上的type属性
(...)

很明显-在HTML5中，scrolling应该被CSS overflow替换。

- matewka

Answer 3

<style>
    iframe::-webkit-scrollbar {  
    display: none;
}  
</style>

以下内容摘自 - Safari/Chrome (Webkit) - 无法隐藏iframe垂直滚动条

- Ian Everall

Answer 4

很奇怪，但是对于设置了overflow:hidden的div标签来说，transform:rotate(0.00001deg)能够帮助解决问题。

- be3

---

对我也起作用了。此外，transform: translateZ(1px)也可以达到同样的效果。 - Henrik Christensen

Answer 5

对我来说，只有width: 99.99%;这一行代码就解决了问题。

我在Chrome中遇到了这个问题，但在Firefox中却没有。

- philard

---

不幸的是，它并不总是奏效。有时候是98%，有时候是95%，这使它成为非常脆弱的解决方案。 - Konrad Gałęzowski

Answer 6

使用overflow-y:hidden;即可隐藏垂直滚动条。

- mohana rao

---

这在Google Chrome中对于IFRAMES无效，Lollero的答案有效。 - dukevin