IE оставляя ненужное место после изображения - PullRequest
Новая
       7

IE оставляя ненужное место после изображения

3 голосов
/ 01 июня 2011

Я создаю письмо в формате HTML как 

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
  <img src="image.jpg" width="x" height="y" style="margin:0; padding:0; display:block;">
 </td> 
</tr>
<tr>
 <p>Para with lots of text</p>
</tr>
</table>

Однако при просмотре в Internet Explorer в нижней части изображения остается свободное место. Как я могу избавиться от этого места?

Ответы [ 5 ]

2 голосов
/ 01 июня 2011

Это не ошибка или что-то в этом роде.

В зависимости от используемого типа документа различные браузеры применяют определенные значения для полей, отступов и границ для различных элементов.

Видв вашем коде я не вижу, где вы устанавливаете границу на изображении равным 0. Сделайте это.

Вообще говоря, лучший тип документа для использования - просто <!DOCTYPE html> Это приводит к стандартному режиму практически во всех браузерах.,Если у вас есть только несколько незначительных изменений (например, границы изображения), которые вам нужно сделать, чтобы обеспечить полное соответствие.

Далее, тег абзаца недопустим внутри TR.Вы пропустили TD, как указал Sparky672.

2 голосов
/ 01 июня 2011

HTML для вашего элемента <table> неправильный.Вам не хватает второго набора <td></td> тегов.

Кроме того, <p></p> поместит некоторое пространство над и под заголовком вашего текста.( Редактировать: Хотя технически верное утверждение о том, что элемент <p> имеет встроенное верхнее / нижнее поле, <p> не вызывает проблемы ОП) 

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img src="image.jpg" width="x" height="y" style="margin:0; padding:0; display:block;">
        </td> 
    </tr>
    <tr>
        <td>
             Para with lots of text
        </td>
    </tr>
</table>
0 голосов
/ 01 июня 2011

Я полагаю, что в IE есть ошибка, которая вставляет ненужное пространство после изображения при помещении в таблицу Попробуйте удалить ВСЕ пробелы между вашими тегами: 

<table border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="image.jpg" width="x" height="y" /></td></tr>
<tr>
 <td><p>Para with lots of text</p></td>
</tr>
</table>

Да, это уродливо, но отчасти поэтому таблицы не являются предпочтительным методом проектирования макетов. Надеюсь, что это работает для вас.

0 голосов
/ 01 июня 2011

Почему внутри table есть <p>? Это только собирается поместить это выше стола. IE, вероятно, показывает пустой <tr></tr>. Вам может понадобиться <td> вокруг вашего <p>

Что происходит, когда вы вообще не используете таблицу и просто показываете изображение?

0 голосов
/ 01 июня 2011

это может быть тег <p>, который дает вам пробел после изображения и перед текстом?

...