0

私は最近、CSS3 の新しい 3D 効果変換のいくつかを使用するマイクロ サイトを開発しています。しかし、特定の目の錯覚が効果を発揮するようにレイヤーを少し巧妙にしようとしてきましたが、それが多くの頭痛の原因となっています...

一般に、Chrome (ただし、Firefox ではなく、Safari や IE はまだ試していません) では、すべてが画面上で適切に「レンダリング」されているように見えますが、リンクをクリックしたり、テキストをハイライトしたりすると、この問題が発生します。トリッキーレイヤー」領域では、カーソルがぐったりし、機能を取得できません。説明に役立つ場合は、カーソルが相互作用するのを妨げている目に見えない壁があるだけです。

何マイルにもわたる実験的なコードを貼り付けずに、この問題の原因を頭の中で知っている人はいますか? 私の最善の推測では、z-index の継承はある時点で失敗しましたが、診断するのは困難です... 誰かが診断を階層化するための良い戦略を知っているかどうかという次の質問につながります (ツールはここでも素晴らしいでしょう) ）！

もちろん、私は標準の開発者ツール/Firebugに精通しています...

みんなありがとう！

4

1 に答える 1

1

さて、私は自分の問題を解決し、階層化の問題を診断する際の将来の参照のために次の戦略を思いつきました...

  1. 互いに干渉している可能性のあるすべての要素の目立たないZ-Index値を確認します。必要に応じてそれらを再注文し、それで問題が解決するかどうかを確認します。そうでない場合は、次に進みます。
  2. 手順1のすべての要素の目立たない配置を確認します。CSSマークアップで「position：absolute」または「position：relative」のいずれかを持つように宣言されていることを確認します。継承/デフォルトに依存しないでください。絶対宣言が鍵となります。
  3. 「backface-visibility」の値を確認してください。セットアップが複雑な場合、何が何であるかを見失いがちです。

そのパターンに従うことは、私のために最終的にそれをしたことです。私の問題は3つすべての組み合わせであることが判明しましたが、上記の手順を実行するまで、必ずしも問題が明らかになるとは限りませんでした。

于 2012-05-13T23:31:22.827 に答える