手机safari为html音频标记呈现空白

Question

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

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

我孤立了这个问题，并找到了解决方法。这里是对情况的描述，以及三个测试页面，可以帮助您了解进度。最后一个测试文件给出了解决方法。查看桌面浏览器和iPhone/iPad中的每个文件以查看行为（和源代码）。

空间显得介绍文字和按钮之间 - audiotest3的文本和按钮，这使得一个新行之前
移动音频标签 - audiotest4
样式保存文本和按钮带有负上边距容器 - audiotest5
答案：将音频风格更改为高度：0和宽度：0 - audiotest6

Click here for the test files。

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

Answer 1

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

我是有这个问题只发生在我的iPad，并添加在我的文字之间使用播放/暂停按钮，一个巨大的空间。

设置音频标签的尺寸为0，并应该照顾你的问题。

audio { 
height:0; 
width:0; 
}