手機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; 
}