Firefox и Chrome добавляют нижний отступ 2px к ячейке таблицы, когда внутри ячейки есть iframe в стандартном режиме.

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

Когда я переключаюсь в режим quirks, отступы исчезают в Firefox и Chrome.
Когда я добавляю div вместо iframe, отступы исчезают.
Установка нулевого значения для таблицы cellpadding и cellspacing не помогает. < br /> Страница 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>

html iframe css html-table quirks-mode
person icramc    schedule 24.02.2012    source источник

Ответы (2)


arrow_upward
8
arrow_downward

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

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

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

person thirtydot    schedule 24.02.2012
comment
Это решило мою проблему. Я потратил на это часы. Огромное спасибо. - person icramc; 25.02.2012

arrow_upward
0
arrow_downward

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

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

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

style="display: block;"
person Max    schedule 09.06.2012