CSS跨浏览器问题

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 问题，具体取决于您的浏览器。

数字游戏

Answer 1

Firefox 3 上的行为也得到了证实。

这是我在第 5 个音频中使用 Firebug 看到的内容：

<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 文件，而 Firefox 只支持 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。你写这段代码的目的是什么？