HTML: странное пространство между элементами iframe? - PullRequest
Новая
       2

HTML: странное пространство между элементами iframe?

16 голосов
/ 03 сентября 2011

Вопрос:

Рассмотрим следующий HTML-код: 

<html>
<head></head>

<body>

<div style="float:left;">
  <div style="background-color: Red; padding-top: 2mm; padding-bottom: 2mm;">
        Dock: Usage controls/symbol list here
    </div>


    <div style="height: 300px; background-color: Khaki; display:block; float:left; overflow: scroll;">

        <ul style="background-color: White; float: left; margin: 0px; padding: 0px; padding-left: 30px; padding-right: 10px;">
            <li>
                <a href="Folders/Content/Inbox" target="ifrmFolderContent" >
                    Posteingang / Inbox
                </a>
            </li>
            <li>
                <a href="Folders/Content/Drafts" target="ifrmFolderContent" >
                    Entwürfe / Drafts
                </a>
            </li>
            <li>
                <a href="Folders/Content/Sent Items" target="ifrmFolderContent" >
                    Gesendet / Sent Items
                </a>
            </li>
            <li>
                Archiv / Archive
            </li>
            <li>
                Papierkorb / Trash
            </li>
            <li>
                Junk / Crap
            </li>
            <li>
                Scam
            </li>
            <li>
                Spam
            </li>
            <li>
                Virus
            </li>
            <li>
                Abrufen / Send & Receive
            </li>
            <li>
                Verfassen / Compose
            </li>
            <li>
                Adressbuch / Address book
            </li>
        </ul>
    </div>




    <div style="width: 400px; height: 300px; background-color: Green; display:block; float:left; margin: 0px; padding: 0px;">



       <iframe marginwidth="0" marginheight="0" hspace="0" vspace="0"  name="ifrmFolderContent" src="http://www.yahoo.com" frameborder="0" style="overflow: none; width: 400px; height: 150px; background-color: Orange; margin: 0px; padding: 0px;">

         Folder Content
       </iframe>



       <iframe marginwidth="0" marginheight="0" hspace="0" vspace="0"  name="ifrmEmail" src="http://www.msn.com" frameborder="0" style="overflow: none; width: 400px; height: 150px; background-color: Orange; margin: 0px; padding: 0px;">

         E-Mail Content

       </iframe>



    </div>



    <div style="background-color: Indigo; padding-top: 2mm; padding-bottom: 2mm; clear: left;">
        Copyright here
    </div>

</div>



</body>

</html>

Он отображается точно так, как и следовало ожидать (Chrome + IE8).

Но теперь я добавлю:

<!DOCTYPE html>

поверх него.

И вдруг я получаю 2-5 мм зеленого пространства между двумя iframe s (содержимое папки / содержимое электронной почты) в обоих Chromeи IE8 (не тестировал FireFox).Что еще более тревожно, кажется, нет никакого способа избавиться от этого пространства (кроме как удалить <!DOCTYPE html>.

Почему? Я имею в виду, зеленый приходит от background-color родительского элемента,но почему между двумя iframe с есть место?

Ответы [ 4 ]

46 голосов
/ 03 сентября 2011

Просто добавьте 

<style>iframe { vertical-align:bottom; } </style>

или 

<style>iframe { display:block; } </style>

<!DOCTYPE html> переводит браузер в стандартный режим, где встроенные элементы размещаются на базовой линии содержащего блока и пробел дляспусковые устройства персонажей всегда располагаются в строке.В других режимах это пространство создается только в том случае, если на одной строке с печатными символами находятся печатные символы, чего не происходит в данном случае.Перемещение iframe с базовой линии любым из указанных выше способов позволяет разместить пространство для спусковых устройств в пределах высоты iframe.

17 голосов
/ 03 сентября 2011

Значение iframe в стандартном режиме по умолчанию равно display: inline.Это означает, что они будут размещены на базовой линии текста, т.е.где нижняя часть «а» заканчивается, а не где нижняя часть «у».Разрыв, который вы видите, - это пространство для спусков в строке текста.Это должно удалить его: 

iframe { display: block; }
2 голосов
/ 04 февраля 2014

Просто быстрое примечание (потому что у меня была эта проблема в IE) ...

Попытка настройки: 

font-size: 0px;

Это сработало (я полагаю, потому что, как кто-то предположил, iframes - это места на базовой линии текста).

Goodluck y'all!

1 голос
/ 03 сентября 2011

Укажите атрибут seamless, который представлен в HTML 5. http://www.quackit.com/html_5/tags/html_iframe_tag.cfm

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...