Firefox и Chrome добавляют 2px нижний отступ к ячейке таблицы, когда в стандартном режиме внутри ячейки есть iframe - PullRequest
6 голосов
/ 24 февраля 2012

Я работал над интранет-приложением, которое годами работало в режиме причуд во всех основных браузерах.Цель состояла в том, чтобы заставить его работать в стандартном режиме, ничего не нарушая, чтобы мы могли использовать некоторые пакеты jQuery.В любом случае моя проблема в стандартном режиме Firefox, и Chrome добавляет нижний отступ в 2 пикселя к ячейке таблицы, когда внутри ячейки есть iframe.Этого не происходит в IE.

Когда я переключаюсь в режим совместимости, отступы исчезают в Firefox и Chrome.Когда я добавляю div вместо iframe, отступы исчезают.Установка таблицы cellpadding и cellspacing на ноль не помогает.Страница iframe src также находится в стандартном режиме.

Вот тестовый пример для вас:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Test</title></head>
<body style="background:#FFF;">
<table cellpadding="0" cellspacing="0" border="0">
      <tr>
            <td id='browser_td' style='width:1000px; height:500px; margin:0px; padding:0px; background:#000; border-bottom:0px;'>
                  <iframe id='browser_iframe' name='browser_iframe' src="http://houston.craigslist.org/" width='1000' height='500' frameborder="0" hspace="0" vspace="0"></iframe>
            </td>
      </tr>
</table>
</body>
</html>

Ответы [ 2 ]

8 голосов
/ 24 февраля 2012

Добавить vertical-align: top к iframe.Начальное значение vertical-align - baseline.

iframe - встроенный элемент.Проблемным пробелом является место, зарезервированное для спусков в письмах.

Более подробная информация здесь: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

0 голосов
/ 09 июня 2012

У меня была эта проблема с изображениями внизу <td> из <table>.В Firefox была добавлена ​​2px, показанная под изображением.(IE был в порядке)

Во всяком случае, я попал на эту интересную страницу: (опубликовано тридцатьдот) https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Изображение сидело на базовой линии текста (видимо), и ядобавил этот тег к изображению.Теперь все хорошо.Спасибо !

style="display: block;" 
...