Question

我正在尝试制作响应式电子邮件 - 除了一些在Android版Gmail中没有合作的小件外，它实际上全面运作。

我将这些非常简单的黑色条纹作为装饰元素放在电子邮件的顶部：

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

有关如何使这些内容跨越电子邮件的整个宽度的任何建议吗？

Answer 1

如果您还没找到解决方案，请尝试

风格=＆＃34;宽度：100％重要＆＃34;喜欢

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

Gmail喜欢剥离大部分CSS，但如果您添加标签！重要的是会保留大部分时间。

Answer 2

因此，请向Gmail提醒，100％表示100％是通过向我们的＆lt; table＆gt;添加最小宽度：100％。

source

Answer 3

经过大量测试后，以下解决方案适用于所有电子邮件客户端（Litmus上提供）的任何垂直间距问题，包括： Andriod上的Gmail应用程序。

<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。这也是替换垂直间隔图像的最佳解决方案。

Answer 4

我不熟悉那些不是为PC设计的客户/网站/等等，所以我不确定这是否有效，但尝试这样做。< / p>

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

即使你丢失了＆＃34;表＆＃34;元素功能，这是我想出的一个示例，尽我所能来匹配线条装饰的颜色和大小设置。

100％宽度的表格无法在Gmail Android中使用

4 个答案: