0

曲線が画像であるブラウザー ウィンドウの下部に、曲線の形をした伸縮性のあるフッターを固定する必要があります。ライブの例をモックアップしました。

フッター画像の透明な部分による下層の「クリック可能な」不動産の損失を最小限に抑えるために、私の本能は、画像をいくつかのセグメント（例では赤いボックス）に切り取り、次のように並べて配置することです。

#arc-segment-1,
#arc-segment-2 {
   position: fixed;
   z-index: 2;
   bottom: 0px;
}
#arc-segment-1 {
   width: 5%; /* where this */
   height: 82px;
   left: 0;
   background-image: url(...);
}
#arc-segment-2 {
   width: 5%;
   height: 72px;
   left: 5%; /* matches this */
   background-image: url(...);
}

ほとんどの主要なブラウザー (IE と FF を除く) では、ウィンドウのサイズが変更されると、ボックス間でヘアライン フラクチャが発生したり、発生したりしますが、これは容認できません。

画像セグメントをフローティングすると問題は解決しますが、フッターを下部に固定し、前述の「クリック可能性」を維持する実装方法は見つかりませんでした。この問題に対する私よりも優れたアプローチはありますか、それとも何らかの方法で修正できますか?

例に関する注意: 例の曲線イメージ自体はまだカットされておらず、まだ 1 つのイメージです。また、青いボックスは問題ありません。伸びないため、問題の影響を受けません。

この動作の理由と実行可能な解決策の両方に興味があります。ありがとう。

4

2 に答える 2

0

W3Cで読んでいるときに、自分である程度実行可能な解決策に出くわしました。

セグメントの幅プロパティが取得され、左右両方のプロパティが指定されている場合、たとえば、画面の中央にある10％幅のセグメントの場合：

#arc-segment-3 {
   left: 45%;
   right: 45%;
}

一部のブラウザは、代わりにヘアラインでセグメントをオーバーラップしているように見えますが、当初の意図どおりに動作します。私の場合、アークのテクスチャがあまり目立たないほど弱いので、これははるかに小さな問題です。ピクセルパーフェクトなアプローチをお持ちの方はいますか？

于 2012-06-13T00:51:53.717 に答える
0

追加できますので、下をクリックしてくださいpointer-events: none;

于 2012-06-11T17:46:19.890 に答える