IE 11 でスティッキー ボタンが機能しないのはなぜですか?

状況: IE 11 でスティッキー ボタンが機能しない

Web 開発の進歩にもかかわらず、さまざまなブラウザーで CSS 機能を利用する場合、特定の互換性の問題が発生する可能性があります。この場合、問題は Internet Explorer (IE) 11 でのスティッキー位置プロパティの使用に関係しています。

問題:

提供された HTML コードには、次の div が含まれています。ボタンを含むクラス「sticky-button-thing-not-working-on-ie」。目的は、この div を固定にして、ユーザーがスクロールしてもボタンが画面の下部に固定されたままになるようにすることです。ただし、この動作は IE 11 では発生しません。

理由:

最新のブラウザで導入されたスティッキー配置プロパティにより、要素は現在の位置に留まることができます。スクロールできるため、ユーザーは重要なコンテンツにアクセスしやすくなります。残念ながら、IE 11 はこのプロパティをネイティブにサポートしていません。

解決策:

IE 11 で意図した動作を実現するには、別のアプローチとして固定位置プロパティを使用します。 。スティッキーとは異なり、固定要素はスクロールに関係なく、ビューポートに対して一定の位置を維持します。 fix と他のいくつかの CSS 調整を組み合わせることで、目的のスティッキー動作をエミュレートし、IE 11 とその他の最新のブラウザーの両方でボタンが画面の下部に残るようにすることができます。

修正コード:

.sticky-button-thing-not-working-on-ie {
  position: fixed;                          /* added to support older browsers */
  position: sticky;
  bottom: 0;
  right: 0;
  background: rgba(0, 211, 211, 0.6);
}

注: スティッキー プロパティはコードから安全に削除できます。本来の目的通りに活用されていないからです。一方、修正版は、古いブラウザに必要な機能を提供します。

追加情報:

• バージョン 16 以降の Edge ブラウザは、スティッキー位置プロパティをサポートします。 .
• この解決策は、IE 11 の画面下部にボタンが固定されないという特定の問題に対処しますが、ブラウザ間の互換性。

以上がIE 11 でスティッキー ボタンが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。