Html 溢出：隐藏；在带有 IFRAME 的 Chrome 上不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7398142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow: hidden; doesn't work on Chrome with IFRAMEs?
提问by lemon
I have an IFRAME with overflows hidden in the css and html. It works in Firefox, but not Chrome/Safari
我有一个 IFRAME，溢出隐藏在 css 和 html 中。它适用于 Firefox，但不适用于 Chrome/Safari
Why is this?
为什么是这样？
回答by Joonas
Right, how about:
对了，怎么样：
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>
as in the scrolling="no"
如在 scrolling="no"
回答by matewka
After a pretty big research I've done on this subject I would like to post my answer, which I suggest, could be an addition to Joonas's answer:
在对这个主题进行了相当大的研究之后，我想发布我的答案，我建议，这可能是对 Joonas 答案的补充：
<style>
iframe {
overflow:hidden;
}
</style>
(...)
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>
I think, both scrollingand overflow:hiddenshould be provided, although this solution won't work in a combination of Chrome and HTML5 doctype. scrollingattribute is deprecated in HTML5 and the overflowproperty doesn't affect iframes in Chrome. I assume, the latter is a bug, since the HTML5 specificationsays clearly:
我认为，无论是scrolling和overflow:hidden应提供的，尽管这种解决方案将不会在Chrome和HTML5文档类型的组合工作。scrolling属性在 HTML5 中已弃用，并且该overflow属性不会影响 Chrome 中的 iframe。我认为后者是一个错误，因为HTML5 规范清楚地说明了：
In addition, HTML5 has none of the presentational attributesthat were in HTML4 as their functions are better handled by CSS:
(...)
- nowrap attribute on td and th.
- rules attribute on table.
- scrolling attribute on iframe.
- size attribute on hr.
- type attribute on li, and ul.
(...)
此外，HTML5 没有 HTML4 中的任何表现属性，因为它们的功能由 CSS 更好地处理：
(...)
- td 和 th 上的 nowrap 属性。
- 表格上的规则属性。
- iframe 上的滚动属性。
- hr 上的大小属性。
- li 和 ul 上的类型属性。
（……）
It's said clearly - in HTML5 scrollingshould be replaced by CSS overflow.
说的很清楚——在 HTML5 中scrolling应该被 CSS 取代overflow。
回答by Ian Everall
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
As found on - Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar
回答by be3
Strange but - transform: rotate(0.00001deg); for div with overflow:hidden; helps for me.
奇怪但 - 变换：旋转（0.00001度）；对于溢出的 div:hidden; 对我有帮助。
回答by philard
Just width: 99.99%;did the trick for me.
刚刚width: 99.99%;为我做了伎俩。
I had this problem in Chrome but not in Firefox.
我在 Chrome 中遇到了这个问题，但在 Firefox 中没有。
回答by mohana rao
Use overflow-y:hidden;then the vertical scroll will be hidden.
使用溢出-y：隐藏；那么垂直滚动将被隐藏。
