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

Вопрос:

Рассмотрим следующий 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 (содержимое папки/содержимое электронной почты), как в Chrome, так и в IE8 (не протестировал FireFox). Что еще более тревожно, похоже, нет способа избавиться от этого пространства (кроме удаления <!DOCTYPE html>.

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

Ответы

Ответ 1

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

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

или

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

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

Ответ 2

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

iframe { display: block; }

Ответ 3

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

Попытка:

font-size: 0px;

Это сработало (я считаю, потому что, как кто-то предложил, фреймы являются местами на исходной основе текста).

Добрый день!