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

我有许多div，它们覆盖了网页背景图像上菜单的不同部分

在div中，我有一个a href链接到另一个页面a播放单击声音

我使用了一个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>

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

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

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

此外，您不必使用

div

作为

a

标记的占位符，您可以直接从

div

的

onclick

（使用

光标：poiner；

您不会注意到任何差异）

---

看看这把小提琴，一个完整的解决方案：

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

我在BackgroundContainer中使用的是

img

，而不是CSS

background

，这样一来：如果有人打印页面，他仍然可以看到背景

我使用固定的

高度

和

宽度

作为“站点”，但它的所有内容都是%的。因此，如果站点的大小发生变化，它应该可以很好地扩展

对于IE中的测试，您必须从服务器（而不是本地文件）运行HTML，这样浏览器就不会停止脚本

我已经删除了几乎所有的脚本，所以请将它们放回原处（一个接一个，每次都要确保页面在所有浏览器中都能正常工作）

请注意，我已经更改了一些类和文件名，因此请相应地检查脚本和CSS（另外，我重新排列了图像文件夹）

在IE10、FF、铬上测试

请注意url（虚拟）作为可单击元素的背景图像

---

祝你好运。

谢谢，我按照说明进行了操作，发现不同的浏览者使用不同的音频文件格式。我用你提供的链接解决了这个问题。我已经结束了我仍然没有得到一个声音播放。它可以识别div上的光标，但没有单击操作。我肯定错过了一些愚蠢的事情。太好了。非常感谢你这么做。正是我想要的。我能用同样的onclick导航到另一个时代吗？要找到更好的解决方案，请看这把小提琴：完美。。万分感谢。这在chrome和firefox中非常有效，但在ie中不会启动。这是网站。在CSS中，我绝对定位了div，这似乎导致了IE的问题

#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;
}