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