Скрытый код для вставки по-прежнему занимает место - PullRequest
Новая
       34

Скрытый код для вставки по-прежнему занимает место

1 голос
/ 06 февраля 2012

У меня есть следующий встроенный код: 

<embed src="audio/tileSelect.wav" autostart="false" width="1" height="1" hidden="true" id="sound1" enablejavascript="true">
<embed src="audio/tileRemove.wav" autostart="false" width="1" height="1" hidden="true" id="sound2" enablejavascript="true">

Хотя они скрыты (и я их не вижу), они все еще занимают место.Как я могу удалить дополнительное пространство, которое они используют?

Я пытался поместить его в div с display: none;, но это не позволило моему аудио работать.

Есть предложения?

Спасибо

Ответы [ 2 ]

0 голосов
/ 13 мая 2014

Принятый ответ у меня не работает, на экране все еще есть пробел при использовании IE7-9. Я знаю, что это старый пост, и браузеры изменились, так как этот ответ был дан. Возьмите этот код ниже и сохраните его как audio.html и запустите его в IE7-10 и последних версиях Chrome, Safari и FireFox. Вы увидите, что использование стиля в принятом ответе все еще отображает пробел на экране с IE7-9. Метод, который я использую, не.

Кроме того, я использую тег HTML5 <audio> , когда он доступен, и затем возвращаюсь к тегу <embed> при необходимости. Я не провел много исследований, но это то, что w3schools в настоящее время рекомендует , и я протестировал все основные браузеры и версии, поэтому по состоянию на 13 мая 2014 года он, кажется, отлично работает для я.

Надеюсь, это поможет.

(для начала воспроизведения аудио может потребоваться секунда, оно поступает с archive.org) 

<div style="background-color:lightgray; height:100px; width:300px; padding:5px;">
    This is the solution I am using so that the embed tag doesn't take up any room...<br>
    Audio is embedded below this block.  You will see no gap in any browser.
</div>
<div style="position:absolute; top:0px; left:0px;">
    <audio autoplay>
        <source src="https://archive.org/download/testmp3testfile/mpthreetest.mp3" type="audio/mpeg">
        <embed width="1" height="1" hidden="true" src="https://archive.org/download/testmp3testfile/mpthreetest.mp3">
    </audio>
</div>
<div style="background-color:gray; height:20px; width:300px; padding:5px;">
    Audio is embedded above this block
</div>

<div style="background-color:aqua; height:100px; width:300px; padding:5px; margin-top:30px;">
    Using a div with "position: relative; top: -50px; left: -50px; overflow: hidden;" still gives a gap...<br>
    Audio is embedded below this block.  You will see a gap in IE7-9.
</div>
<div style="position: relative; top: -50px; left: -50px; overflow: hidden;">
    <audio autoplay>
        <source src="https://archive.org/download/testmp3testfile/mpthreetest.mp3" type="audio/mpeg">
        <embed width="1" height="1" hidden="true" src="https://archive.org/download/testmp3testfile/mpthreetest.mp3">
    </audio>
</div>
<div style="background-color:green; height:20px; width:300px; padding:5px;">
    Audio is embedded above this block
</div>
0 голосов
/ 06 февраля 2012

Хм, есть решение (хотя и не очень красивое): 

.au {
    position: relative; 
    top: -50px; 
    left: -50px; 
    overflow: hidden;
}

Поместите его в делитель и задайте следующие пропорции

...