Как я могу исправить отображение изображений в Outlook 2013?

В пробной версии Outlook 2013 изображения в HTML-сообщениях отображаются очень странно. Насколько я могу оценить через тестирование, похоже, что изображения размером менее 20 пикселей имеют добавление, чтобы увеличить их на 20 пикселей. Я могу что-то сделать, чтобы изменить это? Эти письма отлично смотрятся в Outlook 2010 и везде, где я их тестировал.

Я попытался изменить высоту ячейки таблицы, в которой они находятся (через height="13", а также inline css), а также таблицу и строку таблицы, в которой они находятся, все безрезультатно. Следующий код - простой пример того, что вызывает эту проблему, поскольку вы сможете увидеть красный фон ячейки над изображением:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="195" style="background-color:#ff0000;"><img src="image url here" alt="" width="195" height="13" style="display: block" /></td>
  </tr>
</table>
</body>
</html>

Может ли кто-нибудь помочь?

Ответ 1

Добавьте стиль line-height в тег td (и для хорошей меры добавьте атрибут height к тегу td).

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="195" height="13" style="background-color:#ff0000; line-height:13px;">
      <img src="..." alt="" width="195" height="13" style="display:block;" />
    </td>
  </tr>
</table>

Измененный код проверен в Litmus для всех версий Outlook.

Ответ 2

Извлеките содержимое ячейки, вы не увидите, что красный bg.

Ответ 3

Я обнаружил, что добавление <font size="1"><img /></font> также помогает устранить проблему.

Ответ 4

Добавьте style="display:block;" в любой тег изображения. <img src="/img/s.gif" width="1" height="1" alt="" style="display:block;">

Это приведет к удалению дополнительного дополнения.