1

デスクトップブラウザとは異なり、モバイルSafariは、iPhoneおよびiPadでHTMLをレンダリングするときに、オーディオタグに空白を追加します。どうしてこれなの？不要なスタイル設定なしで動作を回避する方法はありますか？

私の目標は、サイト訪問者が短い音声の抜粋を再生できるようにすることです。紹介テキストと再生/一時停止ボタンは、要素間に1つの間隔を空けて1行に表示する必要があります。コードはデスクトップブラウザで正常に機能しますが、Mobile Safari（iPhone4SおよびiPad3でテスト済み）は、オーディオタグがhtmlファイルに表示される場所に空白（最大30文字に相当）を追加します。

問題を特定し、回避策を見つけました。これが状況の説明と、進行を案内する3つのテストページです。最後のテストファイルは回避策を提供します。デスクトップブラウザとiPhone/iPadで各ファイルを表示して、動作（およびソースコード）を確認します。

紹介テキストとボタンの間にスペースが表示されます-audiotest3テキストと
ボタンの前にオーディオタグを移動します。これにより、新しい行
が作成されます-audiotest4上余白が負のテキストとボタンを保持するコンテナのスタイルを設定します-audiotest5
回答：オーディオスタイルを高さに変更します：0と幅：0-audiotest6

テストファイルについては、ここをクリックしてください。

これは既知のバグですか、それとも別のマークアップを使用する必要がありますか？
別のマークアップです。上記の回答を参照してください。

4

1 に答える 1

2

そのため、iPad の Web サイトで発生していた同様の問題の解決策を探しているときに、あなたの質問を見つけました。CSS でデバッグ作業を行った後、カスタム コントロールを使用してサウンドを再生/一時停止すると、オーディオ要素のデフォルトの高さが 30px で、幅が 200 または 300px のままであることがわかりました。これは、Chrome の開発ツールで確認できます。

iPad でのみ発生していた問題で、再生/一時停止ボタンに使用していたテキストの間に大きなスペースが追加されていました。

オーディオ タグのサイズを 0 に設定すると、問題が解決するはずです。

audio {
height:0;
width:0;
}
于 2013-04-25T08:57:39.730 に答える