iphone - 移动 Safari 为 html 音频标签呈现空白

Question

与桌面浏览器不同，移动 Safari 在 iPhone 和 iPad 中呈现 html 时会为音频标签添加空白。为什么是这样？有没有办法在没有不必要的样式设置的情况下避免这种行为？

我的目标是让网站访问者播放一段简短的音频摘录。介绍性文字和播放/暂停按钮必须显示在一行上，元素之间有一个间距。该代码在桌面浏览器中运行良好，但 Mobile Safari(在 iPhone 4S 和 iPad 3 上测试)在音频标 checkout 现在 html 文件中的位置添加了空白(相当于约 30 个字符)。

我隔离了问题，并找到了解决方法。以下是对情况的描述，以及三个带您完成进度的测试页面。最后一个测试文件给出了解决方法。在桌面浏览器和 iPhone/iPad 中查看每个文件以查看行为(和源代码)。

介绍性文字和按钮之间出现空格 - audiotest3
将音频标签移到文本和按钮之前，这是一个新行 - audiotest4
设置包含负上边距的文本和按钮的容器 - audiotest5
答案:将音频样式更改为高度:0 和宽度:0 - audiotest6

Click here for the test files .

这是一个已知的错误，还是我应该使用不同的标记？
它是不同的标记。请参阅上面的答案。

Answer 1

因此，我在寻找我在 iPad 上的网站上遇到的类似问题的解决方案时发现了您的问题。在对我的 CSS 进行了一些调试工作后，我发现如果您使用自定义控件来播放/暂停声音，音频元素的默认高度仍然为 30 像素，宽度为 200 或 300 像素。您可以在 Chrome 的开发工具中看到这一点。

我遇到的问题只发生在我的 iPad 上，并且在我用于播放/暂停按钮的文本之间添加了一个巨大的空间。

将音频标签尺寸设置为 0，这应该可以解决您的问题。

audio {
height:0;
width:0;
}