移动Safari浏览器呈现html音频标签的空白区域
与桌面浏览器不同，移动Safari在iPhone和iPad上呈现HTML时为音频标签添加了空白区域。 为什么是这样？ 没有不必要的样式设置，是否有办法避免这种行为？
我的目标是让网站访问者播放一段简短的音频摘录。 介绍性文字和播放/暂停按钮必须在一行上以单个元素间隔显示。 该代码在桌面浏览器中运行良好，但Mobile Safari（在iPhone 4S和iPad 3上测试）会在音频标签出现在html文件中的位置添加空白（相当于〜30个字符）。
我孤立了这个问题，并找到了解决方法。 以下是对情况的描述，以及三个测试页面，可以帮助您了解进度。 最后一个测试文件给出了解决方法。 查看桌面浏览器和iPhone / iPad中的每个文件以查看行为（和源代码）。
介绍性文字和按钮之间显示空格 - audiotest3
在文本和按钮之前移动音频标签，这会形成一条新线路 - audiotest4
设置保存文本和按钮的容器的负顶边距 - audiotest5
解答：将音频风格更改为高度：0和宽度：0 - audiotest6
点击这里查看测试文件。
这是一个已知的错误，还是我应该使用不同的标记？
它是不同的标记。 见上面的答案。
所以我找到了你的问题，同时寻找解决方案来解决我在iPad上使用我的网站时遇到的类似问题。 在对我的CSS进行一些调试工作后，我发现如果使用自定义控件播放/暂停声音，音频元素的默认高度仍为30px，宽度为200或300px。 你可以在Chrome的开发工具中看到这一点。
我在iPad上发生的问题只是在我用于播放/暂停按钮的文本之间添加了一个巨大的空间。
将音频标签尺寸设置为0，这应该照顾你的问题。
audio {
height:0;
width:0;
}