IE6 の iframe の水平スクロールバーの解決策

状況は以下のとおりです: (PS: 赤いボックスは iframe 領域を表し、灰色の四角形は上記の width:100% 要素を表します。効果を確認するには IE6 を使用する必要があります。)
灰色のボックスの高さが iframe の高さより大きい場合、垂直および水平のスクロールバーが表示されます (IE6 の場合)。

灰色のボックスの高さが iframe の高さよりも小さい場合、効果は正常です。

解決策 1: 内部ページにスタイルを追加します: html { overflow-y: scroll; }
灰色のボックスの高さが iframe の高さより大きい場合、垂直スクロールバーのみが表示され、効果は正しくなります。

灰色のボックスの高さが iframe の高さよりも小さい場合、垂直スクロールバーは引き続き表示されます (使用不可)。これは欠陥です。

解決策 2: 内部ページにスタイルを追加します: html { overflow-x: hidden; overflow-y: auto; }
灰色のボックスの高さが iframe の高さより大きい場合、垂直スクロールバーのみが表示されますが、右側のコンテンツが完全に表示されません (PS: 内部のテキストは「これは高さ 200 px の div です」)。そのため、効果が正しくありません。

灰色のボックスの高さが iframe の高さより小さい場合、スクロールバーは表示されず、効果は正しくなります。

解決策 3: 何度も試行錯誤しましたが、完璧な純粋な CSS ソリューションはまだ見つかっておらず、最も完璧な効果を追求しています。純粋な CSS では問題を解決できないため、JS を使用する必要があります。以前のテストを通じて、灰色のボックスの高さが iframe の高さよりも小さい場合は、正しい効果を得るために処理は必要なく、灰色のボックスの高さが iframe の高さよりも大きい場合は、ソリューション 1 が最適であることがわかりました。したがって、私たちの js には次のようなアイデアがあります。ブラウザが IE6 で、コンテンツの高さが iframe よりも高い場合は、ソリューション 1 のスタイルを html タグに追加します。以下は jQuery コードです (jQuery がなくても考え方は同じです)。

コードをコピー

コードは次のとおりです。

$(関数(){
if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("html").height()) $("html").css("overflowY","scroll");
});

灰色のボックスの高さが iframe の高さより大きい場合、垂直スクロールバーのみが表示され、効果は正しくなります。
灰色のボックスの高さが iframe の高さよりも小さい場合、効果は正しくなります。
毎日幸せになることを学ぶ（：

>>: CSSはメッセージパネルをスライドするWebコンポーネント機能を実装します