CSS box-shadow在Firefox中落後於flash播放器

我想創建一個帶有css box-shadow的下拉菜單，並且我有一些使用flash的內容，問題出現在下拉菜單中並出現在後面時，影不顯示。實際上箱陰影落後flash播放器CSS box-shadow在Firefox中落後於flash播放器

我simplfy結構

我使用的是Firefox 17.0.1，鉻23.0.1271.97和Flash Player 11.5.502.135

風格

.test { position:absolute; z-index: 100; left:50%; top:30px; border:3px solid blue;width:200px; height:200px; background:gray; box-shadow:50px 50px 130px #000} 
#flash{ position:absolute; left:50%; z-index:-100}

HTML結構

<div class="test"></div> 
<div id="flash">  
<object width="100%" height="400" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> 
<param value="28bc2_2.swf" name="SRC"> 
<embed width="100%" height="400" src="28bc2_2.swf"> 
</object> 
</div>

任何人都知道會發生什麼事和解決方案，謝謝你的幫助:)

來源

2012-12-26 Finn

嘗試添加：-moz-box-shadow：50px 50px 130px＃000000;

來源

2012-12-26 11:36:30 user1929705

感謝花花公子您的答覆。但它似乎不起作用。當我試圖甚至沒有單一的影子表演。 – Finn

哦，我已經想過，也許Firefox不支持任何-moz-box-shadow了。因爲火狐17.0.1使用css3 w3c標準盒子陰影 – Finn

除了使用跨瀏覽器的CSS ...（-moz-和-webkit-像其他人所說的）

嘗試設置比#flash的Z-index值較高的.test的Z-index值。另外，請嘗試將#flash放在.test類的div中。

現在看來，你的閃存div的z-index設置爲-100，並且你的測試的z-index（這是你的菜單？）爲100 ...所以自然你的flash內容會是在.test後面。

來源

2012-12-26 11:38:25 LazerSharks

除了使用跨瀏覽器的CSS ...（-moz-和-webkit-像其他人所說的） ---->看起來-moz不工作在此版本的Firefox 17.0.1上，不知道爲什麼 – Finn

嘗試設置.test的z-index值高於#flash的z-index值。另外... ---->抱歉不可能，html結構假設是這樣的。因爲.test是下拉菜單，#flash是內容頁面。現在看來你設置你的flash div的z-index爲-100，並且你的z-index爲... ---> ya，flash content正好在後面。用這個z-index測試。但仍然落後於Flash內容。噢，我試圖使用小z指數像50（不減），stil不工作:( – Finn

哦，我看到了，我認爲#flash內容應該是在菜單內... – LazerSharks

要得到的box-shadow跨瀏覽器，你需要下面的代碼：

box-shadow: 50px 50px 130px #000; 
-webkit-box-shadow: 50px 50px 130px #000; 
-moz-box-shadow: 50px 50px 130px #000;

也可以嘗試加入wmode參數嵌入Flash：

<div class="test"></div> 
<div id="flash">  
<object width="100%" height="400" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> 
<param value="28bc2_2.swf" name="SRC"> 
<param value="transparent" name="wmode"> 
<embed width="100%" height="400" wmode="transparent" src="28bc2_2.swf"> 
</object>

來源

2012-12-26 11:39:43

啊啊謝謝兄弟，問題是wmode paramater。當我把這個參數設置好以後，box-shadow現在可以很好地工作了。哦，你的信息-moz-box-shadow似乎不適用於這個FF版本（17.0.1） – Finn

@Finn多好！我只問，請，告訴你我的答案是正確的，謝謝。 –

是的，你的回答是正確的。添加wmode參數將解決問題:) – Finn

CSS box-shadow在Firefox中落後於flash播放器

回答

相關問題