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コンポーネント機能を実装します

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

MySQLインデックスを正しく作成する方法

Windows Server 2008R2 ファイルサーバーを Windows Server 2016 にアップグレードする

CSS: 訪問した疑似クラスセレクタの秘密の記憶

HTML 描画ユーザー登録ページ

Webデザインチュートリアル（1）：手順と全体レイアウト

カルーセルカルーセルケースのJS実装

Vue フロントエンド開発における keepAlive の使用方法の詳細な説明

HTML 選択タグにリンクを追加する 3 つの方法

Ubuntu システムにおける Mysql ERROR 1045 (28000): ユーザー root@localhost へのアクセスが拒否される問題の解決方法

Win2008 サーバーセキュリティチェック手順ガイド (日常のメンテナンス手順)

推薦する

MySQLで論理SQLを置き換える際の落とし穴を回避する方法の詳細な説明

Linux で削除できないファイル/フォルダの解決方法

指定された期間内のすべての日付または月を取得する MySQL ステートメント (ストアドプロシージャの設定やテーブルの追加は不要)

HTML の相対パスと絶対パスの違いの分析

CSS3で作成した画像スクロール効果

Zabbix 5.0 ディスク自動検出と読み取り/書き込み監視の問題を分析する

Struts2 ジャンプ後に CSS と JS が無効になる問題の解決策のアイデアと実装手順

上部の固定ナビゲーションバーによって CSS アンカーの配置がブロックされる問題の解決方法

Vueのよく使われる組み込み命令の詳細な説明

CSSスタイルの記述順序と命名規則と注意事項

Sitemesh チュートリアル - ページ装飾技術の原理と応用

Velocity.js はページスクロール切り替え効果を実装します

さまざまなMySQLインデックスの使用方法の詳細な説明

Centos7 FFmpeg オーディオ/ビデオツールのインストールに関する簡単なドキュメント

MySQL ストアド関数（カスタム関数）の定義と使用方法の詳細な説明