Question

我目前处于停滞状态，可以真正使用一些帮助。我正在编写HTML电子邮件，这对我来说是第一次。我对CSS和HTML有基本的了解，但我无法弄清楚如何解决这个Gmail问题，我甚至不知道原因是什么。似乎问题来自唯一可编辑的文本区域，即地址行（Hi [name]，），它也是唯一具有多列的行。看起来文字并没有缩小以适应屏幕，导致相邻的细胞疯狂并扩大图片。它在我测试过的所有其他ESP中都很棒，甚至是Outlook。我附上了一张照片和我的代码。如果您有任何建议或资源，请帮助有需要的菜鸟。

messed up version on Android Gmail app code

<html>

<head>
    <title>Tradeshow_email_PARTY</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
    <table id="Table_01" width="600" height="1046" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="3">
                <img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="http://i.imgur.com/RyJDbPa.png" style="display:block" width="47" height="40" alt="">
            </td>
            <td width="123" height="40" style="line-height: 0pt; font-weight: bolder;"><font face="arial" size="2px" color="#636564">Hi [name],</font>

            </td>
            <td>
                <img src="http://i.imgur.com/KUO971D.png" style="display:block" width="430" height="40" alt="">
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
            </td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
</body>

Answer 1

你应该嵌套你的列而不是colspanning它。在不是行的100％的所有表格单元格上设置宽度也很重要。例如：

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
    <table id="Table_01" width="600" height="1046" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
            </td>
        </tr>
        <tr>
            <td>
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="47">
                      <img src="http://i.imgur.com/RyJDbPa.png" style="display:block" width="47" height="40" alt="">
                  </td>
                  <td width="123" height="40" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#636564;">
                    Hi [name],
                  </td>
                  <td width="40">
                      <img src="http://i.imgur.com/KUO971D.png" style="display:block" width="430" height="40" alt="">
                  </td>
                </tr>
              </table>

            </td>
        </tr>
        <tr>
            <td>
                <img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
            </td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
</body>

您还会注意到我为您修复的其他一些小事。但最终，您在不应该使用的地方使用了大量图像。你的灰色边应该是html，因此所有文本都应该从红色区域下来。

Answer 2

这是基于以上代码的尝试：

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
    <table width="600" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
            </td>
        </tr>
        <tr>
            <td width="600" style="width:600px;min-width:600px;max-width:600px;">
              <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;">
                <tr>
                  <td width="47" style="width:47px;;min-width:47px;padding:0px;margin:0px;">
                      <img src="http://i.imgur.com/RyJDbPa.png" style="display:block;min-width:47px;width:47px;" width="47" height="40" alt="">
                  </td>
                  <td width="123" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#636564;width:123px;min-width:123px;">
                    Hi [name],
                    </td>
                  <td width="430" style="width:430px;min-width:430px;">
                      <img src="http://i.imgur.com/KUO971D.png" style="display:block;width:430px;min-width:430px;" width="430" height="40" alt="">
                  </td>
                </tr>
              </table>

            </td>
        </tr>
        <tr>
            <td>
                <img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
            </td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
</body>

获取适用于Android的Gmail应用以呈现我的HTML电子邮件？

2 个答案: