CSS跨瀏覽器問題

我正在爲學習英語作爲第二語言的人們製作數字遊戲。它使用的是一個使用HTML5的WordPress插件，作爲後備，Flash--這對我來說很重要，因爲我的遊戲的許多目標用戶將在亞洲使用舊版瀏覽器。遊戲涉及16個音軌，這些音軌在頁面上都是不可見的，一旦用戶點擊開始按鈕，一個隨機的音軌將通過javascript淡入進來顯示。CSS跨瀏覽器問題

問題：在Chrome和Safari中，通過CSS display: none成功隱藏音頻播放器。然而，在我的Firefox 5中，使用Flash playeer的瀏覽器（出於某種原因，我不知道這個問題，但這個問題很好），但這些樣式並不適用於它，因此Firefox中的屏幕上有16個音頻播放器。

這是我使用的CSS。

你知道一種方法來使這個CSS適用於Flash播放器嗎？ 16個音軌的ID從1到16

#ONE, #TWO, #THREE, #FOUR, #FIVE, #SIX, #SEVEN, #EIGHT, #NINE, #TEN, #ELEVEN, #TWELVE, #THIRTEEN, #FOURTEEN, #FIFTEEN, #SIXTEEN {position: absolute; left: 0px; top: 0px; display: none; }

這是一個遊戲的鏈接。請注意，遊戲未完成，所以不要期望玩它。現在你只能看到CSS問題，這取決於你的瀏覽器。

NumbersGame

來源

2011-07-19 mjmitche

不知道整個情況，我可以想到 - 「爲什麼你不把所有這些球員放在一個div中，而是向div中添加」display：none'' style – LocustHorde

@LocusHorde所有這些球員都在一個div ，但是如果我將display：none應用於該div，我仍然可以通過javascript隨機選擇並顯示其中一個玩家嗎？ – mjmitche

哦，嗯，在這種情況下，您可能需要每個玩家都帶有唯一id的div（不管哪個更好。就像你可以鏈接到播放器和div的東西），但是如果你在同一頁面中動態生成它，可能會有更好的解決方案如下。 – LocustHorde

行爲在Firefox 3證實過。

這裏我看到5號音頻螢火蟲：

<div style=""> 
<object id="f-FIVE" width="290" height="24" type="application/x-shockwave-flash"   name="f-FIVE" style="outline: medium none; visibility: visible;" data="http://eslangel.com /wp-content/plugins/degradable-html5-audio-and-video/incl/player.swf"> 
    <param name="wmode" value="opaque"> 
    <param name="menu" value="false"> 
    <param name="flashvars" value="initialvolume=80&soundFile=http://eslangel.com/wp-content/uploads/2011/07/five.mp3&playerID=f-FIVE"> 
</object>

我們可以看到，你的對象ID =的風格「F-FIVE」是知名度=可見。

如果將其更改爲隱藏，則隱藏控件。

來源

2011-07-19 13:05:57 Cygnusx1

只是可能看到了問題......你的CSS試圖將樣式應用於元素#FIVE ...，但真正的元素ID是＃f-FIVE。如果你沒有firefox的firebug，我會建議你取得它;-)在這種情況下非常有幫助。美好的一天 – Cygnusx1

不，它不是問題 - 問題是，出於某種原因，所有付款人都添加了「樣式」屬性，該屬性覆蓋了CSS規則。 –

真正的元素是＃f-FIVE，只有Flash播放器。使用html5播放器時，ID是#FIVE，這是我給它的ID。那麼我需要創建兩個樣式表嗎？我可以做一些與閃光燈播放器一起使用的或然式樣式表嗎？ – mjmitche

首先你應該使用HTML5 DOCTYPE。其次，你似乎只提供不支持Firefox的MP3文件，它只支持OGG。

使用Firebug我可以看到圍繞Flash播放器的衆多div實際上都沒有設置display:none。

來源

2011-07-19 13:06:59

好的，謝謝你指出了Firefox的MP3問題，但我的Firefox瀏覽器正在播放MP3（閃光燈），所以我不明白你在...你是否暗示，如果我使用OGC，那麼我會不會有這個問題？或者是什麼？我是一名新手開發人員（實際上只是一名老師試圖製作一些東西），所以如果可以的話請詳細解釋一下。關於你的第三點，你基本上重複了我在OP中陳述的問題。 CSS樣式不適用於Flash播放器，那麼我該如何做到這一點？ – mjmitche

你如何決定是否提供HTML5或Flash，或者插件是爲你做的？關於樣式，display：none樣式沒有被應用，因爲您通過Firefox 5查看代碼時似乎沒有將其應用到代碼中。每個玩家都被一個帶CSS類的div包圍：「audio_wrap」和「html5audio」 - 應用display：none，隱藏它們。但是，由於我不知道您或您的代碼使用什麼邏輯來決定要顯示和隱藏哪些邏輯，因此很難確切地說明在哪裏應用它。 –

插件的決定HTML5或Flash。所有的球員都應該在開始時隱藏起來。他們將在一個數組中，其中一個從數組中隨機選擇並顯示。從數組中選擇隨機鍵的jquery邏輯基本上就是你在這個小提琴上看到的，除了數組中有16個元素，而不是在這個小提琴中的3種顏色http://jsfiddle.net/urfXq/96/ – mjmitche

在每個線的末端有一些JavaScript，看起來像這樣：

if (jQuery.browser.mozilla) {tempaud=document.getElementsByTagName("audio")[0]; jQuery(tempaud).remove(); jQuery("div.audio_wrap div").show()} else jQuery("div.audio_wrap div *").remove();

這似乎是說，如果瀏覽器是Mozilla瀏覽器，那麼它應該表明你已經設置到div display:none。你有什麼打算這一點的代碼？

來源

2011-07-19 13:12:47 shanethehat

我沒有寫jQuery。我想它與WordPress的音頻播放器... – mjmitche

你可能想要刪除它，看看會發生什麼，因爲它是說如果瀏覽器標識爲Mozilla，哪個Firefox，然後設置「display：none」到這些div的每一個都將被'show（）'函數調用刪除。 – shanethehat

它似乎需要該代碼。我刪除了它，並試圖顯示一個現在在Chrome中可見的播放器，但不是在Firefox中。 – mjmitche

CSS跨瀏覽器問題

回答

相關問題