8

perpectiveおよびtransform: translateZCSS プロパティを使用して深さをシミュレートする jQuery 画像スクローラーがあります。Chrome では正しく表示されますが、IE10 や Firefox では表示されません。

プロジェクト全体は次のとおりです (「Who's come」メニュー リンクをクリックして画像スクローラーを表示します): http://www.girlguiding.org.uk/test/biggig/index.html および関連コードの jsFiddle を次に示します。 : http://jsfiddle.net/moosefetcher/rxCMr/28/ (理由はわかりませんが、stackoverflow は jsFiddle にリンクするコードを含める必要があると言っているので、ここに css があります)...

.scroller {
    position: relative;
    perspective: 150;
    -webkit-perspective: 150;
    -ms-perspective: 150;
    -moz-perspective: 150;
}
.artistBox {
    width: 228px;
    height: 268px;
    background-color: #000000;
    border-radius: 16px;
    position: absolute;
    overflow: hidden;
    z-index: 4;
}
.artistBox p {
    position: absolute;
    font-family:"Arial", sans-serif;
    color: white;
    font-size: 22px;
}
.artistBoxFront {
    z-index: 5;
}
.artistBoxNew {
    z-index: 3;
    opacity: 0;
}
.scrollerButton {
    position: absolute;
    top: 128px;
    width: 32px;
    height: 32px;
    border: 2px solid white;
    border-radius: 32px;
    background-color: #F49D19;
    box-shadow: 1px 1px 3px #555588;
    z-index: 6;
}
.scrollerButtonOver {
    background-color: #ffaa26;
    box-shadow: 2px 2px 3px #555588;
}

-ms-プロパティのプレフィックスを含めて、除外して、これを試したことに注意してください。(現在の jsFiddle には、 と の両方が含まれています-webkit-) -moz-。これがIE10で機能しない理由を知っている人はいますか? 乾杯。

4

3 に答える 3

10

長さの単位

perspectiveIE と Firefox では、値の長さの単位( px、em) が必要です。

   -moz-perspective: 800px;
        perspective: 800px;

-webkitChrome と Safari の場合、プレフィックスを使用する場合、長さの単位はオプションです。

-webkit-perspective: 800;    /* This works with or without the px unit */

W3C 規格

perspectiveすべての値に長さの単位を追加する方が安全です。W3C 標準との一貫性が向上しています。これは、すべてのブラウザーがサポートする 1 つのアプローチです。また、Chrome と Safariperspectiveがプレフィックスなしのサポートを開始すると、長さの単位が必要になる可能性があります (W3C 標準および他のブラウザーとの一貫性のため)。

-webkit-perspective: 800px;
   -moz-perspective: 800px;
        perspective: 800px;

注: w3schools.comの現在の情報は古くなっています。IE10 または Firefox のサポートについては言及されておらず、それらの例には長さの単位がありません。developer.mozilla.orgの最近の例には、W3C 標準と一致する長さの単位が含まれています。

于 2013-04-16T21:53:22.880 に答える
2

パースペクティブ プロパティを削除する WebKit ブラウザーがないため、機能していません。noneそのプロパティは、または長さの値を受け入れます。値が 0 でない限り、長さには単位が必要です。px などの単位を追加すると、IE および Firefox で機能します。

http://jsfiddle.net/rxCMr/31/を参照してください

最終バージョンではプレフィックスなしでパースペクティブが IE10 に追加されたため、 -ms- プロパティを削除しました。また、プレフィックスなしのバージョンを最後に移動して、プレフィックス付きのバージョンよりも優先されるようにしました。

なぜそれが WebKit で動作しているのかわかりません。Firefox や IE のようにプロパティを削除する必要がありますが、エラー リカバリを行っているのでしょう。

于 2013-04-16T20:44:56.047 に答える