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跨浏览器问题

回答

相关问题