Ячейки таблицы, отображающие нежелательные отступы в Firefox и IE

Question

У меня есть две ячейки таблицы. Первый содержит ссылку и изображение («CollegiateLink»). Второй содержит форму с изображением для кнопки отправки («Оплатить взносы»):

В Firefox и IE ячейки имеют нежелательные отступы, как показано выше. В Chrome они выглядят нормально. Почему это?

Вот источник строки таблицы:

<tr>
    <td>
        <a href="https://utsa.collegiatelink.net/organization/sigmakappaupsilonhonorsociety">
        <img src="http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/396010_343796938973248_154024167950527_1347540_1267421848_n.jpg" onMouseOver="this.src='http://a4.sphotos.ak.fbcdn.net/hphotos-ak-snc7/404415_343796945639914_154024167950527_1347541_548420198_n.jpg'" 
            alt="CollegiateLink" onMouseOut="this.src='http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/396010_343796938973248_154024167950527_1347540_1267421848_n.jpg'" />
        </a>
    </td>
    <td>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="UVBXKLNNGX8GL">
        <input type="image" src="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/382615_343796955639913_154024167950527_1347542_331738916_n.jpg" onMouseOver="this.src='http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/396479_343796968973245_154024167950527_1347543_1793145374_n.jpg'" 
            onMouseOut="this.src='http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/382615_343796955639913_154024167950527_1347542_331738916_n.jpg'" border="0" name="submit" 
            alt="PayPal - The safer, easier way to pay online!">
        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" style="position: absolute; bottom: 0; right: 0;">
        </form>
    </td>
</tr>

(не) рабочий пример проблемы можно найти здесь: http://www.facebook.com/sky.utsa

Я не могу использовать карту изображения, потому что изображение «Оплата взносов» является элементом формы, а не якорным тегом. Я попытался явно установить высоты td безуспешно. Есть идеи?

Answer 1

Проблема вызвана форматированием вашего HTML. Спецификации W3C не ясны в этом вопросе, но встроенные элементы не всегда игнорируют элементы пробела, которые вы можете использовать для форматирования кода. Они могут свернуть пробелы до одного символа (если это не неразрывный пробел), но он все еще там.

Проблема

Прямо сейчас ваш код выглядит так:

<a href="...">
  <img src="..."/>
</a>

Вы можете подумать, что это должно быть так же, как:

<a href="..."><img src="..."/></a>

но это не так; он интерпретируется Firefox как:

<a href="..."> <img src="..."/> </a>

К сожалению, спецификации W3C специально не требуют, чтобы пользовательские агенты игнорировали или отображали пробелы сразу после начального тега или непосредственно перед конечным тегом, поэтому некоторые браузеры будут отображать их, некоторые будут полностью игнорировать их, и некоторые будут игнорировать их, но не полностью.

В вашем случае это последнее. Пробел на самом деле не отображается (по крайней мере, не горизонтально), но тег img теперь обрабатывается как отображаемый внутри блока текста. Дополнительное вертикальное пространство, которое вы видите, вызвано вертикальным выравниванием img относительно базовой линии текстового блока.

Решение

Так вот, у меня никогда не было проблем с vertical-align, но есть несколько решений этой проблемы:

1. Вы можете просто установить vertical-align: top для тега img.
2. Вы можете избавиться от форматирования кода и устранить пробелы с обеих сторон img.
3. Вы можете изменить font-size на что-то очень маленькое, например 1px.
4. Вы можете использовать правильное фоновое изображение для контейнера (т.е. table) вместо рендеринга элемента в срезах.

Лично по стилистическим и практическим причинам я бы сделал 2 и 4. Для встроенных элементов, таких как a, просто безопаснее не заполнять содержимое пробелами. А использование правильного фона означает, что вам не нужно беспокоиться о точном выравнивании пикселей, и вы можете уменьшить размеры изображения. Хотя я бы тоже не стал использовать таблицу в этом случае.

Answer 2

Вы можете объединить два элемента <td>, которые вызывают проблемы в Firefox, и плавать кнопки и формы рядом друг с другом.

Вместо:

<tr>
   <td>
      <a href="#">
         <img src="image.jpg"/>
      </a>
   </td>

   <td>
      <form target="_blank" method="post" action="">
         <!-- form stuff here -->
      </form>
   </td>
</tr>

Попробуйте это:

<tr>
   <td>
      <a href="#" style="float:left;">
         <img src="image.jpg"/>
      </a>

      <form target="_blank" method="post" action="" style="float:left;">
         <!-- form stuff here -->
      </form>
   </td>
</tr>

Answer 3

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

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

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

style="display: block;"