Ошибка в таблице Gmail в приложении Gmail

После нескольких дней поиска решения (безуспешно), я решил обратиться за коллективной мудростью и опытом сообщества за помощью. IОшибка в таблице Gmail в приложении Gmail

У меня есть шаблон электронной почты, который корректно отображается на всех настольных, сетевых и мобильных клиентах, за исключением приложения Gmail для Android. У меня есть вложенная навигационная таблица (состоящая из верхнего изображения, самой навигации и нижнего изображения). По какой-то причине приложение Gmail для Android отображает горизонтальный и вертикальный зазор вокруг вложенной навигационной таблицы. Вложенная таблица должна охватывать ширину (380 пикселей) и высоту (85 пикселей) содержащейся ячейки, но это не так. Этот пробел появляется только в приложении Gamil для Android.

Я прикреплял jpg как ссылку. Я добавил зеленый цвет фона в ячейку таблицы, чтобы вы могли видеть проблему с пробелом.

Если я установил табличный тег таблицы в style = "vertical-align: bottom;", пробел появится в верхней части вложенной навигационной таблицы. Это вызывает неправильное использование логотипа.

Если я установил табличный тег таблицы в style = "vertical-align: top;", пробел появится в нижней части вложенной таблицы навигации. Таблица выровнена с логотипом, но теперь у меня есть разрыв между нижним навигационным изображением и основным контентом.

У меня также есть пробел на правой стороне вложенной таблицы (так как тег сохранения имеет align = "left").

Я также разместил весь код под изображением, но проблема с вложенными таблицами появилась в разделе «Preheader and Navigation».

Благодарим вас за ваше время и руководство. Джордж.

http://epidm.edgesuite.net/CMS/YH/gmailapp.jpg

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta name="viewport" content="width=device-width" /> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 

<body style="margin:0; background-color:#000000;"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="000000;" style="table-layout:fixed;"> 
<tr> 
<td align="center" valign="top" style="background-color:#000000;"> 
<!--Preheader and Navigation--> 
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="min-width:600px;"> 
<tr> 
<td align="right" style="vertical-align:middle; padding:5px 10px 5px 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#a88156;">Make us part of your resolutions in 2015 – look inside to <strong><a href="#" target="_blank" style="color:#a88156;">see how</a></strong>!</td> 
</tr> 
<tr> 
<td align="center" style="vertical-align:top; padding:0px 0px 0px 0px;" bgcolor="00ff66"> 
    <table width="600" border="0" cellspacing="0" cellpadding="0" style="min-width:600px;"> 
    <tr> 
    <td width="220" height="85" align="left" style="vertical-align:top; line-height:85px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_01y.jpg" width="220" height="85" alt="LOGO" title="LOGO" style="display:block; border:0;" /></a></td> 
    <td width="380" height="85" align="left" style="vertical-align:top;"> 
     <table width="380" border="0" cellspacing="0" cellpadding="0" style="min-width:380px;"> 
     <tr> 
     <td width="380" height="15" align="center" style="vertical-align:top; line-height:15px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_02y.gif" width="380" height="15" style="display:block;" border="0" alt="" /></td> 
     </tr> 
     <tr> 
     <td height="52" align="center" bgcolor="#555555" style="vertical-align:middle; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">QWERTYUIO</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ASDF</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ZXCV BNMLK</a></td> 
     </tr> 
     <tr> 
     <td width="380" height="18" align="center" style="vertical-align:top; line-height:18px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_03y.jpg" width="380" height="18" style="display:block;" border="0" alt="" /></td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    </table> 
</td> 
</tr> 
</table> 
<!--Panel 1--> 
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#e5e5e5" style="min-width:600px;"> 
<tr> 
<td align="center" valign="top" style="padding:0px 0 0 0;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_04y.jpg" width="600" height="252" alt="" title="" border="0" style="display:block;"/></a></td> 
</tr> 
<tr> 
<td align="center" valign="top" style="padding:20px 10px 20px 10px;"> 
    <table width="580" border="0" cellspacing="0" cellpadding="0" align="center"> 
    <tr> 
    <td align="left" style="vertical-align:top; padding:0px 0px 0px 10px; font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#000000;">MNBVCXZL KJHG POIUYTREWQA</td> 
    </tr> 
    <tr> 
    <td align="left" style="vertical-align:top; padding:15px 60px 0px 10px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</td> 
    </tr> 
    <tr> 
    <td align="left" style="vertical-align:top; padding:20px 0px 0px 10px;"> 
     <table width="134" height="41" align="left" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td align="center" valign="middle" style="padding:0px 0px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#ffffff; background-color:#95553a;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none; font-size:14px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_06y.gif" width="134" height="40" alt="CTA" title="CTA" border="0" style="display:block;"/></a></td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    </table> 
</td> 
</tr> 
</table> 
<!--Panel 2--> 
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="min-width:600px;"> 
<tr> 
<td align="right" valign="top" style="padding:20px 0px 0px 0px;"> 
    <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#aaaaaa"> 
    <tr> 
    <td align="left" valign="top" style="padding:0 20px 0 0;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_05y.gif" width="300" height="260" alt="" title="" border="0" style="display:block;" /></a></td> 
    <td align="right" valign="top"> 
     <table border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td align="left" valign="top" style="padding:15px 80px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#000000;">MNBVCXZL KJHG POIUYTREWQA</td> 
     </tr> 
     <tr> 
     <td align="left" valign="top" style="padding:15px 45px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> 
     </tr> 
     <tr> 
     <td align="left" valign="top" style="padding:20px 0px 0px 0px;"> 
     <table width="134" height="41" align="left" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td align="center" valign="middle" style="padding:0px 0px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#ffffff; background-color:#95553a;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none; font-size:14px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_06y.gif" width="134" height="40" alt="CTA" title="CTA" border="0" style="display:block;"/></a></td> 
     </tr> 
     </table> 
     </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    </table> 
</td> 
</tr> 
</table> 
<!--SOCIAL--> 
<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center" style="min-width:600px;"> 
<tr> 
<td align="center" style="vertical-align:top; padding: 20px 0 0 0;"> 
    <table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td align="center" style="vertical-align:middle; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#ffffff; font-weight:bold; padding:0px 0px 0px 0px;">#QWERTYUIOP</td> 
    <td align="left" valign="top" style="padding:0 0 0 15px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_09.jpg" width="45" height="44" alt="" title="" style="display:block; border:0;" /></a></td> 
    <td align="left" valign="top" style="padding:0 0 0 15px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_09.jpg" width="45" height="44" alt="" title="" style="display:block; border:0;" /></a></td> 
    <td align="left" valign="top" style="padding:0 0 0 15px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_09.jpg" width="45" height="44" alt="" title="" style="display:block; border:0;" /></a></td> 
    </tr> 
    </table> 
</td> 
</tr> 
</table> 
<!--LEGAL--> 
<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center" style="min-width:600px;"> 
<tr> 
<td align="center" valign="top" style="padding:25px 0;"> 
    <table width="320" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td align="right" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#ffffff; padding-right:20px;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">POIUYTREW</a></td> 
    <td align="center" valign="middle"><img src="http://epidm.edgesuite.net/CMS/YH/yh_pipe_10.gif" width="2" height="21" style="display:block;" alt="" /></td> 
    <td align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#ffffff; padding:0px 20px;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">LKJHG</a></td> 
    <td align="center" valign="middle"><img src="http://epidm.edgesuite.net/CMS/YH/yh_pipe_10.gif" width="2" height="21" style="display:block;" alt="" /></td> 
    <td align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#ffffff; padding-left:20px;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">MNBV CXZLK</a></td> 
    </tr> 
    </table> 
</td> 
</tr> 
<tr> 
<td align="left" style="vertical-align:top;"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td align="center" style="vertical-align:top; padding:0px 20px 12px 20px; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</td> 
    </tr> 
    <tr> 
    <td align="center" style="vertical-align:top; padding:0px 20px 12px 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor.</td> 
    </tr> 
    <tr> 
    <td align="center" style="padding:0px 0px 0px 0px; vertical-align:top; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Contact Us</a> &nbsp;|&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Legal Notices</a> &nbsp;|&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Unsubscribe</a></td> 
    </tr> 
    <tr> 
    <td align="center" style="padding:2px 0px 10px 0px; vertical-align:top; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Qwertyu Asdfgh/Awer Asdfghu Tyuiop</a></td> 
    </tr> 
    </table> 
</td> 
</tr> 
</table> 
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="20" align="left" valign="top">&nbsp;</td> 
</tr> 
</table> 

</td> 
</tr> 
</table> 
</body> 
</html>

источник

2015-01-05 George

ли вы когда-нибудь найти починку для этого? – Smickie

К сожалению, нет. – George

К сожалению, Gmail для Android приложение делает некоторые странные вещи с изображением и таблица размеров, пытаясь соответствовать вашей электронной почты на экране. Большинство проблем можно решить, предоставив таблице контейнера inline min-width или предоставив свои изображения display: block; и задав при необходимости явные высоты и ширину.

Ваш случай, однако, немного отличается. Кажется, что проблема возникает, когда вы вставляете таблицу с несколькими строками изображений внутри ячейки. У братьев-сестер нет таких вложенных таблиц. Here is another example of this problem.

Я нашел то, что кажется обходным решением here, однако мне не повезло с его внедрением. Возможно, вам повезет больше, но вам, возможно, придется изменить свою структуру HTML, чтобы она работала. В частности, вам может потребоваться заменить текстовые ссылки в меню изображениями.

Подытоживая обходной путь:

Подтвердив проблему - Gmail приложение округляет при изменении размера таблицы, и вниз при изменении размера изображения. Это может вызвать разрыв в 1 пиксель между изображениями на столе.

Дайте все <tr> сек строчный стиль display: block; white-space: nowrap;.
Все <td> s встроенный стиль display: inline-block;.
Удалите любые объявления ширины или высоты с вашего <td> s.
Удалите все пробелы между <td> s.
Убедитесь, что ваш стол для тары имеет номер min-width.

Campaign Monitor's CSS Guide может также пригодиться вам при устранении этой проблемы.

Вот ваш код с моей попыткой применения обходного пути:

<table width="600" border="0" cellspacing="0" cellpadding="0" style="min-width:600px; background-color: green;"> 
<tr style="display: block; white-space: nowrap;"> 
<td align="left" style="vertical-align:top; line-height:85px;display: inline-block;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_01y.jpg" width="220" height="85" alt="LOGO" title="LOGO" style="display:block; border:0;" /></a></td><td align="left" style="vertical-align:top;display: inline-block;"> 
    <table width="380" border="0" cellspacing="0" cellpadding="0" style="min-width:380px;"> 
    <tr style="display: block; white-space: nowrap;"> 
    <td align="center" style="vertical-align:top; line-height:15px;display: inline-block;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_02y.gif" width="380" height="15" style="display:block;" border="0" alt="" /></td> 
    </tr> 
    <tr> 
    <td width="380" height="52" align="center" bgcolor="#555555" style="vertical-align:center; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">QWERTYUIO</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ASDF</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ZXCV BNMLK</a></td> 
    </tr> 
    <tr style="display: block; white-space: nowrap;"> 
    <td align="center" style="vertical-align:top; line-height:18px;display: inline-block;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_03y.jpg" width="380" height="18" style="display:block;" border="0" alt="" /></td> 
    </tr> 
    </table> 
</td> 
</tr> 
</table>

источник

2015-02-22 17:38:52 pschueller

Ошибка в таблице Gmail в приложении Gmail

ответ

Смежные вопросы