мобильное сафари отображает пустое пространство для аудиотекста html

Question

В отличие от настольных браузеров, мобильный Safari добавляет пустое пространство для звукового тега, когда он отображает html в iPhone и iPad. Почему это? Есть ли способ избежать поведения без ненужной настройки стиля?

Моя цель - дать посетителю сайта возможность воспроизвести короткий фрагмент аудио. Вводные кнопки текста и воспроизведения/паузы должны отображаться на одной строке с одним интервалом между элементами. Код отлично работает в настольных браузерах, но Mobile Safari (протестированный на iPhone 4S и iPad 3) добавляет пробел (эквивалент ~ 30 символов), где звуковой тег появляется в html-файле.

Я выделил проблему и нашел обходное решение. Вот описание ситуации и три тестовые страницы, которые проведут вас через прогрессию. Последний тестовый файл дает обходное решение. Просмотрите каждый файл в браузере рабочего стола и iPhone/iPad, чтобы увидеть поведение (и исходный код).

Пространства появляется между вводным текстом и кнопками - audiotest3
Переместить аудио тега перед текстом и кнопок, что делает новую линию - audiotest4
Style контейнер, который содержит текст и кнопку с отрицательным верхним краем - audiotest5
ОТВЕТ: Изменить стиль звука на высоту: 0 и ширину: 0 - audiotest6

Click here for the test files.

Это известная ошибка, или я должен использовать другую разметку?
Различная разметка. См. ОТВЕТ выше.

Answer 1

Итак, я нашел ваш вопрос во время поиска решения аналогичной проблемы, с которой я столкнулся с моим сайтом на своем iPad. После выполнения некоторой отладочной работы с моим CSS я обнаружил, что если вы используете пользовательские элементы управления для воспроизведения/приостановки звука, аудиоэлемент по-прежнему будет иметь высоту по умолчанию 30 пикселей и ширину 200 или 300 пикселей. Это можно увидеть в инструментах разработчика Chrome.

Проблема, которая возникла только на моем iPad, и добавляла огромное пространство между текстом, который я использовал для кнопок воспроизведения/паузы.

Установите размеры звуковых тегов на 0 и это должно позаботиться о вашей проблеме.

audio { 
height:0; 
width:0; 
}