Электронная почта подписчика: GMail преобразует высоту в минимальную высоту

Question

Это, казалось бы, известная проблема при доставке электронной почты пользователям Google: Google изменяет любые объявления "height" на "min-height".Это означает, что изображения, которые сложены, больше не «соприкасаются» друг с другом без разрыва.

Кто-нибудь знает о хорошей работе вокруг?

Вот пример:

<div style="height:244px">
    <img src="http://www.domain.com/images/top.gif" alt="" />
</div>
<div style="height:266px">
    <img src="http://www.domain.com/images/bottom.gif" alt="" />
</div>

В GMail выглядит следующим образом:

<div style="min-height:244px">
    <img src="http://www.domain.com/images/top.gif" alt="" />
</div>
<div style="min-height:266px">
    <img src="http://www.domain.com/images/bottom.gif" alt="" />
</div>

Таким образом, вместо этого:

Два изображения, сложенные друг на друга, выглядят в GMail следующим образом:

Должен ли быть простой обходной путь?

Answer 1

Я только что столкнулся с этой проблемой и решил ее, установив max-height, с которой он не связывается.

Answer 2

Добавить vertical-align: top, display: block или float: left на изображение.

По умолчанию изображения являются встроенными блоками и выровнены по базовой линии текста .Это означает, что если вы поместите какой-либо текст рядом с ними, то нижняя часть изображения выровняется с нижней частью «х», а не с нижней частью «у».«Зарезервированное пространство» для этого потомка - это то, что вызывает пространство между вашими изображениями.

Любое из описанных свойств, о которых я упоминал выше, будет препятствовать выравниванию изображения с базовой линией текста, все по-разному.

Answer 3

Я заметил, что GMail не мешает настройке атрибута <td height="...">.Так что это может быть обходной путь, если вы можете легко назначить проблемный элемент в таблицу.

Answer 4

Попробуйте вместо этого использовать высоту строки!

Answer 5

У меня были теги DIV, которые я должен был отображать: table-cell

Я решил эту проблему, добавив изображение спейсера шириной 1px в ячейку с атрибутом высоты (не в стиле css), установленным ввысота, которой я хотел, чтобы была клетка.Это не идеально, но работа выполнена и является кросс-браузерным / почтовым клиентом.