web-dev-qa-db-ja.com

オーバーフロー：非表示。 ChromeではIFRAMEを使用しますか？

Cssとhtmlにオーバーフローが隠されたIFRAMEがあります。 Firefoxでは動作しますが、Chrome/Safariでは動作しません

どうしてこれなの？

htmlcssgoogle-chromeiframeoverflow
41
dukevin

そうですね

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

scrolling="no"

http://jsfiddle.net/neSBS/

73
Joonas

このテーマについてかなり大きな調査を行った後、回答を投稿したいと思います。これは、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およびoverflowプロパティはChromeのiframeに影響を与えません。 HTML5仕様 が明確に述べているので、後者はバグだと思います：

さらに、HTML5には、HTML4にあったプレゼンテーション属性がありません。これらの関数はCSSにより適切に処理されるためです。
（...）
-tdおよびthのnowrap属性。
-テーブルのルール属性。
-iframeのスクロール属性。
-時間のサイズ属性。
-liのtype属性、およびul。
（...）

明確に言われています-HTML5ではscrollingをCSS overflowに置き換える必要があります。

12
matewka

奇妙な-変換：rotate（0.00001deg）; overflow：hiddenを含むdivの場合。私に役立ちます。

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

- Safari/Chrome（Webkit）-iframe垂直スクロールバーを非表示にできません

1
Ian Everall