HTML电子邮件文本无法在Gmail Mobile中正确显示

时间:2016-07-03 08:25:01

标签: javascript jquery html css email

我终于可以在所有客户端看到我的电子邮件了!除了Gmail移动版。具体来说,它将我的导航栏链接和页脚栏链接(哪些是表格)推向左侧,而不是将它们居中。

有什么建议吗?

导航条形码:



<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tees" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TEES
                                 </a></td>
                            <td width="0">
                              <table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
                                <tbody>
                                  <tr>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                            <td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tanks" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TANKS</a></td>
                            <td class="ecxh" width="0">
                              <table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
                                <tbody>
                                  <tr>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                            <td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/accessories" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">ACCESSORIES
                                 </a></td>
                            <td class="ecxh" width="0">
                              <table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
                                <tbody>
                                  <tr>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                            <td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/sale" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">SALE</a></td>
                            <td class="ecxh" width="0">
                              <table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
                                <tbody>
                                  <tr>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
&#13;
&#13;
&#13;

除了使用图片链接而不是文字外,我的页脚与此类似。

1 个答案:

答案 0 :(得分:0)

查看代码后,您似乎已使用align="center"属性将表置于中心位置。我建议使用CSS而不是HTML属性。您可以使用margin:0 auto; CSS属性将表格置于其父容器中。

请参阅以下更新的代码:

&#13;
&#13;
<table class="ecxw320" align="center" border="0" cellpadding="0" cellspacing="0" width="640">
  <tbody>
    <tr bgcolor="#000000">
      <td height="50">
        <!--Use margin:0 auto; to center a table within it's parent container-->
        <table style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td>
                <table align="center" border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td width="20">

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

              <td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tees" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">TEES
                                 </a>
              </td>
              <td width="0">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
                  <tbody>
                    <tr>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tanks" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">TANKS</a>
              </td>
              <td class="ecxh" width="0">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
                  <tbody>
                    <tr>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/accessories" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">ACCESSORIES
                                 </a>
              </td>
              <td class="ecxh" width="0">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
                  <tbody>
                    <tr>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/sale" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">SALE</a>
              </td>
              <td class="ecxh" width="0">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
                  <tbody>
                    <tr>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;