CSS跨浏览器问题答案

【问题标题】：CSS cross-browser issueCSS跨浏览器问题
【发布时间】：2011-07-19 21:12:47
【问题描述】：

我正在为学习英语作为第二语言的人制作一个数字游戏。它使用了一个使用 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

【问题讨论】：

不知道整个情况，我能想到-“为什么不把所有这些玩家都放在一个div中，然后在div中添加display:none样式呢？
@LocusHorde 所有这些玩家都在一个 div 中，但是如果我将 display:none 应用于该 div，我仍然可以通过 javascript 随机选择并显示其中一个玩家吗？
哦，嗯，在这种情况下，您可能需要 div 中的每个播放器都具有唯一的 id（更好的。就像您可以链接到播放器和 div 的东西）但是如果您在动态生成它相同的页面，可能下面有更好的解决方案。

标签： css cross-browser

【解决方案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。

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

【讨论】：

刚刚可能看到了问题...您的 CSS 正在尝试在元素 #FIVE 上应用样式...但真正的元素 ID 是 #f-FIVE。如果你没有firefox的firebug。我建议得到它;-) 在这种情况下非常有帮助。美好的一天
不，这不是问题——问题是，出于某种原因，所有付款人都添加了“样式”属性，该属性会覆盖 CSS 规则。
真正的元素是#f-FIVE，只有 Flash 播放器。使用html5播放器，id是#FIVE，也就是我给它的id。那么我需要创建两个样式表吗？我可以为 Flash 播放器制作某种临时样式表吗？
嗯，据我了解，它是根据浏览器功能生成html5播放器或flash播放器的插件？...如果是这样，你必须找到一种方法来调整flash的生成播放器不包括样式，因为即使您在 CSS 中设置 f-FIVE 元素的样式，内联样式属性也会覆盖您的 CSS 文件。

【解决方案2】：

首先你应该使用 HTML5 DOCTYPE。

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

使用 Firebug，我可以看到围绕 Flash 播放器的许多 div 中没有一个实际上设置了 display:none。

【讨论】：

好的，感谢您指出 Firefox mp3 问题，但我的 Firefox 浏览器正在播放 mp3（带 Flash），所以我不明白您的意思...您是否建议如果我使用OGC，那么我不会有这个问题？或者是什么？我是一名新手开发人员（实际上只是一名试图做某事的老师）所以如果可以的话请解释更多。关于您的第三点，您基本上重复了我在 OP 中陈述的问题。 CSS 样式不适用于 Flash 播放器，我该如何实现呢？
您如何决定是提供 HTML5 还是 Flash，还是插件为您提供服务？关于样式，未应用 display:none 样式，因为在通过 Firefox 5 查看时，您应用它的 id 似乎不在代码中。例如每个播放器都被一个带有 CSS 类的 div 包围：“audio_wrap”和“html5audio”——将 display:none 应用于这些，隐藏它们。但是，由于我不知道您或您的代码使用什么逻辑来决定显示和隐藏哪些逻辑，因此很难准确说明在哪里应用它。
插件决定 HTML5 还是 Flash。所有玩家都应该在一开始就被隐藏起来。它们将位于一个数组中，其中一个从数组中随机选择并使其可见。从数组中选择随机键的 jquery 逻辑基本上就是你在这个小提琴中看到的，除了数组中有 16 个元素而不是这个小提琴中的 3 种颜色jsfiddle.net/urfXq/96
Firefox 不支持 MP3 文件，但您仍然可以使用 jquery mediaelements.js - mediaelementjs.com 等 polyfill 播放 mp3 文件

【解决方案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。您编写这段代码的目的是什么？

【讨论】：

你可能想删除它，看看会发生什么，因为它是说如果浏览器识别为 mozilla，Firefox 会这样做，那么为每个 div 设置的 display:none 将是被show() 函数调用删除。
它似乎需要该代码。我删除了它并尝试显示 1 个现在在 Chrome 中可见但在 Firefox 中不可见的播放器。