时间戳

首页 > 解决方案 > iOS Safari 中的 HTML 音频元素显示奇怪

html - iOS Safari 中的 HTML 音频元素显示奇怪

问题描述

我<audio>在页面中有 HTML 元素。页面和音频元素在所有浏览器的计算机上看起来和工作正常。当页面首次在 iOS 上的 Safari 中加载时，音频元素/播放器看起来不错。但是，当我将页面缩小时，音频播放器缩小到只有一个播放按钮，它们显示在相邻元素的顶部 - 播放器按钮相对于相邻元素实际上相当大（参见下面的屏幕截图）。

当我在 Safari 中打开页面（未针对移动设备优化）时，它看起来像这样。

当我捏页面时，它看起来像这样

代码很简单：页面上的每个音频都是这样定义的：

  <audio controls="controls" controlsList="nodownload">
     <source src="http://somesite.com/music/some-song.mp3" type="audio/mpeg">
     Your browser does not support the 'audio' element
  </audio>

并且有一些我玩过的 CSS 试图让它工作，它目前是：

audio {
    height: 25px;
    min-height: 10px;
    padding: 2px 0px 2px 0px;
    display: block;
}

这是怎么回事？有解决办法吗？

标签： htmliosaudiosafari

解决方案

推荐阅读