Question

我在网页的背景图片上有一些覆盖菜单不同部分的div。

在div中我有一个href链接到另一个页面播放点击声

我使用CSS技巧来填充div，以便光标在div上向右移动。请参阅以下代码

<script language="javascript" type="text/javascript">
  function playSound(soundfile) {
      "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
  }
</script>     

<div id="apWelcome">
   <a href= "#" class="fill-div" onclick="playSound('Sounds/click.ogg');"> </a>
</div>

下面列出了apWelcome和填写区域的CSS：

#apWelcome {
cursor: pointer;
position: absolute;
left: 104px;
top: 216px;
width: 49px;
height: 66px;
}

a.fill-div {
cursor: pointer;
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

问题是在FF24中，点击行为很好，但也没有声音，Chrome - 半工作（声音播放） - 视觉上页面向下跳，IE不显示光标或没有功能。

任何人都知道所有三个浏览器的解决方法或完全不同的方法。谢谢。

Answer 1

阅读有关html（跨浏览器）声音的this文章。不同的浏览器允许不同类型的声音文件。

另外，您不必使用div作为a标记的placeHolder，您可以直接从div onclick调用您的函数（带{ {1}}你不会注意到任何差异）

请参阅此小提琴，一个完整的解决方案：http://jsfiddle.net/avrahamcool/ybxBq/

Answer 2

我从头开始重建整个布局。你可以从here下载它（我会保持链接活动一周）我不知道是否有必要，但是......对我来说更容易。

我在BackgroundContainer中使用img而不是CSS background，这样：如果有人打印页面，他仍会看到背景。
我使用固定height＆amp; width作为“网站”，但其所有内容均为％。所以如果网站的大小发生变化，它应该会很好地扩展。
在IE中进行测试，你必须从服务器运行HTML（而不是从本地文件） - 所以浏览器不会停止脚本
我删除了几乎所有的脚本，所以把它们放回去（每次都要确保页面仍在所有浏览器中运行）
注意我已经改变了你的一些课程和文件名，所以检查你的脚本和CSS（也重新安排了Image文件夹）。
在IE10，FF，Chrome上测试
注意url（dummy）为可点击元素的背景图片。

使用带有href的Div标签作为可点击菜单元素的占位符

2 个答案: