Question

我正在为学习英语作为第二语言的人制作数字游戏。它使用的是一个使用HTML5的WordPress插件，作为后备Flash，这对我来说非常重要，因为我的游戏的许多目标用户将在亚洲使用较旧的浏览器。游戏涉及16个音轨，这些音轨在页面上都是不可见的，一旦用户点击开始按钮，一个随机的音轨将通过javascript淡入显示。

问题：在Chrome和Safari中，通过CSS display: none成功隐藏了音频播放器。但是，在我的Firefox 5中，浏览器（由于某些原因我不知道，但这个问题出现了很好）使用Flash播放器并且样式不适用于它，因此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

Answer 1

在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”的样式是visibility = visible。

如果将其更改为隐藏，则隐藏控件。

Answer 2

首先，您应该使用HTML5 DOCTYPE。

其次，您似乎只提供不受Firefox支持的MP3文件，只支持OGG。

使用Firebug我可以看到Flash播放器周围的许多div实际上都没有设置display:none。

Answer 3

在每个行的末尾有一些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，那么它应该显示你设置为display:none的div。你对这段代码的意图是什么？

CSS跨浏览器问题

3 个答案: