Столбцы HTML в новостной рассылке Gmail

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

<table class="w650" width="650" cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td height="20"></td>
        </tr>

        <tr>
            <td width="225" bgcolor="#e1822d" valign="top" align="left">
                <div style="padding:12px 20px 0px 20px;">
                    <div style="font-family:arial;font-size:20px;color:#FFFFFF;line-height:36px;">
                        <singleline label="Title">Tenerife</singleline>
                    </div>
                    <div style="font-family:arial;font-size:11px;color:#FFFFFF;line-height:20px;">
                        <multiline label="Description">Click to see all properties <br /> Lorem Ipsum Dolor sit amet</multiline>
                    </div>
                </div>
            </td>
            <td width="425" valign="top" align="left">
                <img editable="true" src="images/side_image_01.jpg" label="Image" width="425" border="0" style="border:none;" alt="Image" />
            </td>
        </tr>
    </tbody>
</table>

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

Но в Gmail и только в Gmail выводит с дополнительным размером в оранжевой колонке:

введите здесь описание изображения

Я знаю, что глупо сосредотачиваться на этом, но меня действительно раздражает, что мой HTML-код является пуленепробиваемым, и даже старые почтовые клиенты Outlook могут отображать его правильно, но затем Gmail искажает его.

Кто-нибудь знает, что я должен ввести либо во встроенном css, либо в головном css, либо в чем-то еще, чтобы Gmail понял?


gmail html campaign-monitor
person Dimser    schedule 08.04.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Добавьте display: block; к атрибуту style тега изображения или img { display: block; }, если у вас где-то есть раздел <style> и вам нужно применить это и к другим изображениям.

По какой-то причине Gmail добавляет дополнительное поле к изображениям, которые явно не указаны как display: block.

person pilsetnieks    schedule 08.04.2013

arrow_upward
1
arrow_downward

У каждого почтового клиента своя техника рендеринга HTML.

Я не могу найти разницу между обоими изображениями. Я вижу, что оба изображения идентичны.

Из того, что я понял, все, что я могу сказать, это то, что вы можете установить встроенную фиксированную ширину, чтобы заставить Gmail использовать ваш стиль. !important может помочь вам форсировать стиль.

person Rahul Patil    schedule 08.04.2013
comment
Прошу прощения за плохое отображение... Но если внимательно посмотреть на изображение 2, оранжевая рамка немного выходит за нижнюю границу. И определение высоты тоже не сработало - person Dimser; 08.04.2013
comment
И я знаю о разнице в рендеринге HTML :) Но я не понимаю, как Chrome может отображать это так глупо.. - person Dimser; 08.04.2013