CSS觀點在Internet Explorer 10或Firefox

不工作我有一個jQuery圖片滾動模擬使用perpective和transform: translateZ CSS屬性的深度。它在Chrome中正確呈現，但不在IE10或Firefox中呈現。CSS觀點在Internet Explorer 10或Firefox

這裏是整個項目（「誰是未來」菜單中點擊鏈接查看的圖片滾動）： http://www.girlguiding.org.uk/test/biggig/index.html ，這裏是一個的jsfiddle的相關代碼： http://jsfiddle.net/moosefetcher/rxCMr/28/ （我不知道爲什麼，但計算器告訴我，我需要包括代碼鏈接到的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？乾杯。

來源

2013-04-05 moosefetcher

不知道這是否算作'凹凸'，但我剛剛發現IE10在開發人員工具的'怪癖'模式選項中正確呈現上述3D。任何人都知道這可能是爲什麼？如果這是一個有用的啓示呢？ – moosefetcher 2013-04-10 11:43:34

怪癖模式下的IE10不符合標準。它可能允許長度值沒有所需的長度單位（並且默認情況下假設爲「px」）。 – 2013-04-16 22:09:21

長度單位

IE和Firefox需要長度的上perspective值（px，em）的單元。

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

對於Chrome和Safari，當使用-webkit前綴時，長度單位是可選的。

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

W3C標準

它的安全長度單位添加到所有perspective值。它更符合W3C standard。這是所有瀏覽器都支持的一種方法。一旦Chrome和Safari瀏覽器開始支持perspective沒有前綴，這是可能的，他們將需要一個長度單位（的一致性與W3C標準，並與其他瀏覽器）。

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

注：上w3schools.com目前的信息是過時的。沒有提及對IE10或Firefox的支持，它們的示例沒有長度單位。上developer.mozilla.org的-最近更多的例子包括長度單位，與W3C標準相一致。

來源

2013-04-16 21:53:22

感謝您的回覆！這是做的伎倆。 – moosefetcher 2013-04-17 09:09:34

我向W3Schools提交了一個錯誤報告：也許他們會修復它。他們的例子沒有指定任何變體的單位。 – 2013-11-03 05:49:27

這是行不通的，因爲沒有WebKit瀏覽器下降的角度屬性。該財產或者接受none或者長度值。長度需要一個單位，除非值爲0.如果添加一個單位，如px，它可以在IE和Firefox中使用。

見http://jsfiddle.net/rxCMr/31/

我刪除了-ms-財產的角度加入IE10沒有在最終版本的前綴。我還最後移動了前綴，以便勝過前綴版本。

我不知道爲什麼它是在WebKit的工作。它應該放棄像Firefox和IE這樣的屬性，但我想它正在做錯誤恢復。

來源

2013-04-16 20:44:56

感謝您的回覆。這確實是失蹤的單位。 – moosefetcher 2013-04-17 09:10:13

太棒了！有可能接受我的回答嗎？編輯：沒關係。我剛剛看到別人也回答了。 – 2013-04-17 19:35:21

是的，抱歉 - 仍然不是100％的關於這裏的禮節，但我認爲其他答案是更詳細一點。 – moosefetcher 2013-04-19 14:23:50

我使用的是Matthew Wagerfield的ParallaxJS和perspective: 4000px，但它仍然不能在IE10/11中工作，而在Chrome和Firefox中卻絕對不錯。

的標記

<ul class="container"> 
    <li class="layer">...</li> 
    <li class="layer">...</li> 
    <li class="layer">...</li> 
</ul>

在.container定義perspective: 4000px是罰款FF和Chrome，但它只是開始爲IE工作的.layer要進行定義。所以也許檢查一下。可能與我已經設置的無數transform-style: preserve-3d || flat有關，但其要點是：檢查在哪個選擇器您的視角設置。

來源

2017-09-01 08:47:32 robro

CSS觀點在Internet Explorer 10或Firefox

回答

相關問題