オーバーフローを修正する方法: 固定された親/子要素の隠れたバグ?

オーバーフロー: 固定親/子要素の隠れたバグ

オーバーフローを設定する場合: 固定親要素、その中の子要素で非表示境界の外に見えるようになる可能性があります。これは、ほとんどのブラウザでの固定位置の処理方法が原因で発生します。

この問題に対処するには、CSS クリップ プロパティを利用できます。

.parent {
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background: #555;
  clip: rect(0px, 300px, 300px, 0px); /* Clip the parent to its own dimensions */
}

親にクリップ プロパティを設定することで、要素の場合は、要素の表示部分とその要素を制限する長方形の領域を定義します。 Children.

考慮事項:

• 親要素に静的または相対的な配置を使用することは避けてください。相対的に配置されたコンテナ内で絶対的に配置された親を使用することを検討してください。
• クリップ座標ではパーセンテージはサポートされていません。 100% を表すには auto を使用します。
• 子要素の配置と CSS3 変換 (スケールなど) は、特定のブラウザー (IE11 や Chrome34 など) で制限される場合があります。

互換性を高めるため、次のスタイルを子に追加することを検討してください。要素:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

ブラウザの互換性:

• IE8: メニューは表示されますが、リンクはクリックできません
• IE9: 次の場合にはメニューが表示されません部分的にスクロールしないと見えない部分
• iOS Safari
• iOS Safari 5 : クリップされたコンテンツがスクロール時に再描画される場合があります
• FF (13 )、IE10 、Chrome、Chrome for Android: 通常、期待どおりに動作します

注このアプローチは古いブラウザやモバイル ブラウザでは完全にサポートされていない可能性があります。

以上がオーバーフローを修正する方法: 固定された親/子要素の隠れたバグ?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。