溢出：隐藏；不适用于带有 IFRAME 的 Chrome？

Posted 2023-03-05

【中文标题】溢出：隐藏；不适用于带有 IFRAME 的 Chrome？

【英文标题】：overflow: hidden; doesn't work on Chrome with IFRAMEs?

【发布时间】：2011-11-15 22:08:52

【问题描述】：

我有一个 IFRAME，在 css 和 html 中隐藏了溢出。它适用于 Firefox，但不适用于 Chrome/Safari

这是为什么？

【参考方案1】：

对，怎么样：

<iframe scrolling="no" src="http://www.google.com"  ></iframe>

如scrolling="no"

http://jsfiddle.net/neSBS/

【讨论】：

做到了，谢谢！而且你有一段时间没有使用 iframe 是有原因的......（使用它们很痛苦）

scrolling 属性在 HTML5 中已被弃用，它在那里根本不起作用。

@matewka ***.com/questions/4804604/…

@Joonas 是的，我知道。但是如果内容文档不适合 iframe，seamless 属性不会隐藏滚动条。目前，当涉及到最新的 Chrome 浏览器和 HTML5 文档时，无法在 iframe 中管理滚动条。滚动属性不起作用，CSS 也不会溢出。后者可能是浏览器错误。

@matewka 那个问题的答案怎么样？据我所知，建议是使用几乎所有已知的方法来隐藏滚动条（有效代码与否）。而且，AFAIK，没有 100% 的工作解决方案。也许您可以使用 ajax 之类的东西而不是使用 iframe 引入内容？

【参考方案2】：

使用overflow-y:hidden;则垂直滚动会被隐藏。

【讨论】：

这在 Google Chrome for IFRAMES 中不起作用，Lollero 的回答确实有效

【参考方案3】：

在我对这个主题进行了相当大的研究之后，我想发布我的答案，我建议这可以作为 Joonas 答案的补充：

<style>
    iframe 
        overflow:hidden;
    
</style>
(...)
<iframe scrolling="no" src="http://www.google.com"  ></iframe>

我认为，scrolling 和 overflow:hidden 都应该提供，尽管此解决方案不适用于 Chrome 和 HTML5 文档类型的组合。 scrolling 属性在 HTML5 中已弃用，overflow 属性不会影响 Chrome 中的 iframe。我认为，后者是一个错误，因为HTML5 specification 清楚地说：

此外，HTML5 没有 HTML4 中的任何表示属性，因为 它们的功能由 CSS 处理得更好： (...) - td 和 th 上的 nowrap 属性。 - 表格上的规则属性。 - iframe 上的滚动属性。 - 小时的尺寸属性。 - li 和 ul 的类型属性。 (...)

说的很清楚——在 HTML5 中 scrolling 应该替换为 CSS overflow。

【参考方案4】：

width: 99.99%; 为我解决了问题。

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

【讨论】：

不幸的是，它并不总能奏效。有时是 98%，有时是 95%，这使得解决方案非常脆弱。

【参考方案5】：

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

发现于 - Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar

【参考方案6】：

奇怪但 - 变换：旋转（0.00001度）；对于具有溢出的 div：隐藏；对我有帮助。

【讨论】：

也为我工作。此外，transform: translateZ(1px) 也做了同样的事情。