2

私が制作中のウェブサイトのナビゲーションは3つのタブとして機能し、3つの対応するコンテンツのそれぞれがクリックすると前方に表示されます。

Chrome 22では動作しないことに気づきました（1年前にサイトがオンラインになったときにChromeでテストしたと90％確信していますが）が、IE9とFF16では完全に問題ありません。

これが私の問題の要約です：http：//jsfiddle.net/be7mQ/3/

ご覧のとおり、 Chrome 22でホバー（クリック）できるのは3つの最後のタブのみです。Chromeが、残りのコンテンツの上にある.tab-containerすべての要素を表示するのではなく、それぞれに新しいz-indexスタックを作成したようなものです。z-index:21

すべての要素はposition:fixedorposition:absoluteであり、何が問題なのかわかりません。

4

5 に答える 5

4

Chromeが、残りのコンテンツの上にある.tab-containerすべての要素を表示するだけでなく、それぞれに新しいz-indexスタックを作成したようなものです。z-index:21

この動作はChrome22で意図的に導入されました。ボックスをposition: fixed使用すると、WebKitベースのブラウザに新しいスタッキングコンテキストが作成されz-index、現在表示されている動作が発生します。

詳しくはこちらをご覧ください。モバイルの実装を支援するためにCSS2.1仕様の改訂版として提案されていると言われています（モバイルWebKitブラウザーでも同じ動作がすでに発生しています）。この一連の議事録である程度対処されましたが、私が見てきたように、仕様に実際の変更はまだありません。ワーキンググループはまだコンセンサスに達していない。

私は、Microsoftの互換性に関する懸念に同意します。私はこれが現代のサイトのかなりの部分を壊しているのを見ることができます。この問題は、他の回答で示されているように、基本的に状況に応じて、影響を受けるレイアウトの性質に完全に依存する回避策によって悪化します。

于 2012-11-05T18:11:57.927 に答える
1

BoltClockの答えはその答えであり、以前に書いたように、それぞれのケースでこれに対する特定の修正が必要になりますが、これが私が自分の壊れたサイトを解決した方法です：

http://jsfiddle.net/be7mQ/13/

つまり、以前のすべてのdivを、Chrome22以外のブラウザで新しいスタックを強制する必要がposition:fixedある唯一のposition:fixed親に配置します。#tabsz-index:1

このようにして、新しい#tabs要素内で、以前と同じようにz-indexを自由に試すことができます。

于 2012-11-06T11:00:39.730 に答える
0

使用しているので

height: 100%

.tab-container {では、最後の1つが他のすべてとオーバーラップしているため、3番目（最後）の1つだけがホバリングに機能します。高さを削除してみてください：タブコンテナのcssから100％。できます！

于 2012-11-05T18:19:22.657 に答える
0

固定位置を使用しているため、このtop: 0プロパティにより、最後の要素が他のすべての要素にカーソルを合わせます。タブ要素を配置する代わりに、次のようにタブコンテナの上部を変更します。

HTMLを次のように変更します

<div class="tab-container info">
    <div id="info" class="tab">I<br/>N<br/>F<br/>O</div>    
</div>

<div class="tab-container news">
    <div id="news" class="tab">N<br/>E<br/>W<br/>S</div>    
</div>

<div class="tab-container shop">
    <div id="shop" class="tab">S<br/>H<br/>O<br/>P</div>    
</div>​

そしてあなたのCSSを

.info{
    top:0px;
}
.news{
    top:100px;
}
.shop{
    top:200px;
}​

フィドル

于 2012-11-05T18:12:40.663 に答える
0

から削除height: 100%し.tab-containerます。3番目のタブの高さは前の2つを覆っています。私があなたのフィドルでこれをしたとき、それらはすべてクリック可能でした。

于 2012-11-05T18:15:59.273 に答える