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

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

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

1. 我在 BackgroundContainer 中使用 img 而不是 CSS background，这样：如果有人打印页面，他仍然会看到背景。
2. 我使用固定的height&width 作为“站点”，但它的所有内容都以% 为单位。因此，如果网站大小发生变化，它应该可以很好地扩展。
3. 要在 IE 中进行测试，您必须从服务器（而不是从本地文件）运行 HTML - 所以浏览器不会停止脚本
4. 我已经删除了几乎所有你的脚本，所以把它们放回去（一个一个，每次确保页面在所有浏览器中仍然有效）
5. 请注意，我已经更改了您的一些类和文件名，因此请相应地检查您的脚本和 CSS（另外，我重新排列了 Image 文件夹）。
6. 在 IE10、FF、Chrome 上测试
7. 注意 url(dummy) 作为可点击元素的背景图像。

祝你好运。

Answer 2

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

另外，您不必使用您的div 作为a 标签的占位符，您可以直接从div 的onclick 调用您的函数（使用cursor:poiner;，您不会注意到任何区别）

看这个 Fiddle，一个完整的解决方案：http://jsfiddle.net/avrahamcool/ybxBq/