Firefox 和 HTML5 音频元素不能很好地配合使用？

Question

在 Firefox 上，嵌入的 HTML5 音频元素的镶边上方会出现一个空白区域。每当媒体开始播放时就会出现。我试图弄清楚这是从哪里来的，但不能。这是 Firefox 处理 html5 音频所固有的吗？

例如，我点击了http://www.html5rocks.com/en/tutorials/audio/quick/ 上的示例（在帖子底部），它看起来像下图。 （在 Firefox 上）。

但是，这在 Google Chrome 和 Safari 上不会发生。

Answer 1

这似乎是 Firefox 实现 HTML5 audio 元素的问题。您可以使用一些额外的标记和 css 来解决它。

CSS：

<style>
    .wrapper {
        height: 30px;
        position: relative;
    }

    audio {
        bottom: 0;
        position: absolute;
    }
</style>

HTML：

<div class="wrapper">
    <audio src="your/path/file.mp3" controls></audio>
</div>