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

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

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

Вот пример:

<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:

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

Попробуйте использовать строчную высоту!

Ответ 5

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

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