溢出:隐藏;在iframe中不使用Chrome吗?

I have an IFRAME with overflows hidden in the css and html. It works in Firefox, but not Chrome/Safari

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

Why is this?

这是为什么呢?

6 个解决方案

#1

Right, how about:

对,如何:

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

。滚动="不">

as in the scrolling="no"

在滚动=“不”

http://jsfiddle.net/neSBS/

#2

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 scrolling and overflow:hidden should be provided, although this solution won't work in a combination of Chrome and HTML5 doctype. scrolling attribute is deprecated in HTML5 and the overflow property doesn't affect iframes in Chrome. I assume, the latter is a bug, since the HTML5 specification says clearly:

我认为，滚动和溢出:应该提供隐藏，尽管这个解决方案不会在Chrome和HTML5 doctype的组合中发挥作用。在HTML5中滚动属性被弃用，溢出属性不会影响到Chrome中的iframe。我假设，后者是一个bug，因为HTML5规范明确地说:

In addition, HTML5 has none of the presentational attributes that 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处理:(…)- nowrap属性在td和th上。-表上的规则属性。-在iframe上滚动属性。- hr的大小属性。- type属性on li, and ul。(…)

It's said clearly - in HTML5 scrolling should be replaced by CSS overflow.

显然，HTML5的滚动应该被CSS溢出代替。

#3

Strange but - transform: rotate(0.00001deg); for div with overflow:hidden; helps for me.

奇异但转换:旋转(0.00001deg);为div溢出:隐藏;对我帮助。

#4

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

As found on - Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar

如Safari/Chrome (Webkit) -无法隐藏iframe垂直滚动条。

#5

-1

Use overflow-y:hidden; then the vertical scroll will be hidden.

使用overflow-y:隐藏;然后垂直滚动将被隐藏。

#6

-1

Just width: 99.99%; did the trick for me.

宽度:99.99%;这是我的诡计。

I had this problem in Chrome but not in Firefox.

我在Chrome上有这个问题，但在Firefox中没有。

#1