it-roy-ru.com

Таблицы шириной 100% не работают в Gmail Android

Я пытаюсь создать отзывчивое электронное письмо - на самом деле оно работает довольно хорошо, за исключением некоторых маленьких кусочков, которые не работают в Gmail для Android.

У меня есть эти серьёзно простые чёрные полосы, которые сидят в верхней части письма как декоративный элемент:

<table width="100%" cellpadding="0" cellspacing="0" align="center" valign="top">
    <tr><td width="100%" height="11" bgcolor="#000000"></td></tr>
    <tr><td width="100%" height="2" bgcolor="#FFFFFF"></td></tr>
    <tr><td width="100%" height="1" bgcolor="#000000"></td></tr>
    <tr><td width="100%" height="30" bgcolor="#FFFFFF"></td></tr>
</table>

И все же они не отображаются в виде чего-то большего, чем крошечная черно-белая полоска, напоминающая ультратонкий восклицательный знак в приложении Gmail для Android.

Аналогично, есть нижний колонтитул, который не охватывает всю ширину письма:

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
    <tr>
        <td>

        <table width="650" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
            <tr>
                <td align="right" class="footer">
                    <img src="images/footer.png" />
                </td>
            </tr>
        </table>

        </td>
    </tr>
</table>

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

15
nebulousecho

Если вы не нашли решение, попробуйте 

style = "ширина: 100%! важно" нравится 

 <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="width:100%!important">

Gmail любит отбрасывать большую часть CSS, но если вы добавите ярлык! 

42
JoePhillips

Поэтому напомните Gmail, что 100% означает 100%, добавив min-width: 100% к нашей <таблице>.

источник

11
insulaner

После тщательного тестирования решение, приведенное ниже, будет работать для любых проблем с вертикальным интервалом во всех почтовых клиентах (доступно на Litmus), в том числе. Gmail App на Андриод.

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100% !important;">
    <tr>
        <td bgcolor="#00a0cc" height="25" style="background:#00a0cc;height:25px;line-height:0;font-size:0;">&nbsp;<br /></td>
    </tr>
</table>

Ключевым моментом является применение width:100% !important к таблице, не будет работать при применении к td. Это также лучшее решение для замены вертикальных разделительных изображений.

2
Mark

Я не знаком с созданием клиентов/сайтов/и т.д. для всего, что не предназначено для ПК, поэтому я не уверен, сработает ли это или нет, но попробуйте сделать это.

<center>
<h1 style="color:#888888;">Android Client Header</h1>
<p>Demonstration</p>
</center>
<hr color="#000000" style="height:11px;">
<hr color="#FF0000" style="height:2px;">
<hr color="#000000" style="height:1px;">
<hr color="#FF0000" style="height:30px;">

<h3 style="color:#0070ff;">Content 1</h3>
<p color="#808080">E-mail Here</p>
<hr color="#000000">
<center>
<h1 style="color:#db880f;text-size:10px;">Android Client Footer</h1>
<p style="color:#888888;">Demonstration</p>
</center>

Несмотря на то, что вы утратили элемент элемента «таблица», я привел пример этого примера, стараясь изо всех сил согласовать ваши настройки цвета и размера для оформления линий.

0
user3799724