我的HTML电子邮件在桌面和iOS Gmail上看起来不错,但在安卓Gmail上看不到。如何消除中间奇怪的空白<;td>;?

我的HTML电子邮件在桌面和iOS Gmail上看起来不错,但在安卓Gmail上看不到。如何消除中间奇怪的空白<;td>;?,html,css,gmail,html-email,Html,Css,Gmail,Html Email,这里真的很混乱。我不知道如何在手机上检查Gmail应用程序中的元素,以了解CSS是否起作用。这封邮件在我妈妈的手机上、在桌面上、在我的安卓系统上的gmail.com上看起来都很棒,但在安卓系统上的gmail应用程序上却没有 以下是我手机上的坏显示,然后是正确显示的一个: 在我添加字体大小0px之前,也有类似的空白,但垂直。不知道为什么会这样 <html> <head> <title>IGS-email (1)</title> <meta h

这里真的很混乱。我不知道如何在手机上检查Gmail应用程序中的元素,以了解CSS是否起作用。这封邮件在我妈妈的手机上、在桌面上、在我的安卓系统上的gmail.com上看起来都很棒,但在安卓系统上的gmail应用程序上却没有

以下是我手机上的坏显示,然后是正确显示的一个:

在我添加字体大小0px之前,也有类似的空白,但垂直。不知道为什么会这样

<html>
<head>
<title>IGS-email (1)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="body" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  <!--Including the trackingIme tag will allow your open rates to be tracked for this campaign-->
        [[trackingImage]]
<!-- Save for Web Slices (IGS-email (1).psd) -->
<div class="linkWrapper" style="display: flex; justify-content: center;">
  <a style="margin: 0 auto;" href="[[viewAsWebpage]]">View as Webpage</a>
</div>
<table id="Table_01" width="800" height="998" border="0" cellpadding="0" cellspacing="0" style="font-size: 0px !important; margin: 0 auto;">
    <tr>
        <td rowspan="11">
            <img src="https://....jpg" width="47" height="907" alt></td>
        <td colspan="22">
            <img src="https://....jpg" width="706" height="26" alt></td>
        <td rowspan="11">
            <img src="https://....jpg" width="47" height="907" alt></td>
    </tr>
    <tr>
        <td colspan="4">
            <a href="https://.../" target="_blank">
                <img src="https://....jpg" width="64" height="16" border="0" alt="aboutpage"></a></td>
        <td colspan="3">
            <img src="https://....jpg" width="45" height="16" alt></td>
        <td colspan="2">
            <a href="https://.../" target="_blank">
                <img src="https://....jpg" width="95" height="16" border="0" alt="servicespage"></a></td>
        <td colspan="3">
            <img src="https://....jpg" width="88" height="16" alt></td>
        <td colspan="2" rowspan="3">
            <a href="https://..." target="_blank">
                <img src="https://....jpg" width="119" height="134" border="0" alt="logo"></a></td>
        <td colspan="2">
            <img src="https://.......jpg" width="98" height="16" alt></td>
        <td colspan="2">
            <a href="https://.../" target="_blank">
                <img src="....jpg" width="117" height="16" border="0" alt="industriespage"></a></td>
        <td>
            <img src="https://....jpg" width="28" height="16" alt></td>
        <td colspan="3">
            <a href="https://.../" target="_blank">
                <img src="....jpg" width="52" height="16" border="0" alt="jobspage"></a></td>
    </tr>
    <tr>
        <td colspan="12">
            <img src="https://....jpg" width="292" height="27" alt></td>
        <td colspan="8">
            <img src="https://....jpg" width="295" height="27" alt></td>
    </tr>
    <tr>
        <td colspan="12">
            <img src="https://....jpg" width="292" height="91" alt></td>
        <td colspan="8">
            <img src="https://....jpg" width="295" height="91" alt></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="https://....jpg" width="40" height="124" alt></td>
        <td colspan="18">
            <img src="https://....jpg" width="626" height="124" alt></td>
        <td colspan="2">
            <img src="https://....jpg" width="40" height="124" alt></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="https://....jpg" width="40" height="492" alt></td>
        <td colspan="19">
            <img src="https://....jpg" width="627" height="492" alt="emailbody"></td>
        <td>
            <img src="https://....jpg" width="39" height="492" alt></td>
    </tr>
    <tr>
        <td colspan="22">
            <img src="https://....jpg" width="706" height="26" alt></td>
    </tr>
    <tr>
        <td colspan="22">
            <img src="https://....jpg" width="706" height="16" alt></td>
    </tr>
    <tr>
        <td colspan="11" rowspan="3">
            <img src="https://....jpg" width="272" height="89" alt></td>
        <td colspan="2">
            <img src="https://....jpg" width="135" height="15" alt></td>
        <td colspan="9" rowspan="3">
            <img src="https://....jpg" width="299" height="89" alt></td>
    </tr>
    <tr>
        <td colspan="2">
            <a href="https://..." target="_blank">
                <img src="https://....jpg" width="135" height="45" border="0" alt="reviewbutton"></a></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="https://....jpg" width="135" height="29" alt></td>
    </tr>
    <tr>
        <td>
            <img src="https://....jpg" width="47" height="30" alt></td>
        <td colspan="22">
            <img src="https://....jpg" width="706" height="30" alt></td>
        <td>
            <img src="https://....jpg" width="47" height="30" alt></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="https://....jpg" width="47" height="60" alt></td>
        <td>
            <a href="https://www.facebook.com/..." target="_blank">
                <img src="https://....jpg" width="22" height="30" border="0" alt="facebook-igs"></a></td>
        <td colspan="2">
            <img src="https://....jpg" width="22" height="30" alt></td>
        <td colspan="2">
            <a href="https://www.instagram.com/.../" target="_blank">
                <img src="https://....jpg" width="29" height="30" border="0" alt="instagram-gs"></a></td>
        <td>
            <img src="https://....jpg" width="20" height="30" alt></td>
        <td colspan="2">
            <a href="https://www.linkedin.com/company.../" target="_blank">
                <img src="https://....jpg" width="33" height="30" border="0" alt="linkedin-igs"></a></td>
        <td colspan="2">
            <img src="https://....jpg" width="132" height="30" alt></td>
        <td colspan="5">
            <a href="https://..." target="_blank">
                <img src="https:/....jpg" width="202" height="30" border="0" alt="url"></a></td>
        <td colspan="2">
            <img src="https://....jpg" width="89" height="30" alt></td>
        <td colspan="5">
      <img src="https://....jpg" width="157" height="30" alt="phonenumber"></td>
        <td rowspan="2">
            <img src="https://....jpg" width="47" height="60" alt></td>
    </tr>
    <tr>
        <td colspan="22">
            <img src="https://....jpg" width="706" height="30" alt></td>
    </tr>
    <tr>
        <td>
            <img src="https://....gif" width="47" height="1" alt></td>
        <td>
            <img src="https://....gif" width="22" height="1" alt></td>
        <td>
            <img src="https://....gif" width="18" height="1" alt></td>
        <td>
            <img src="https://....gif" width="4" height="1" alt></td>
        <td>
            <img src="https://....gif" width="20" height="1" alt></td>
        <td>
            <img src="https://....gif" width="9" height="1" alt></td>
        <td>
            <img src="https://....gif" width="20" height="1" alt></td>
        <td>
            <img src="https://....gif" width="16" height="1" alt></td>
        <td>
            <img src="https://....gif" width="17" height="1" alt></td>
        <td>
            <img src="https://....gif" width="78" height="1" alt></td>
        <td>
            <img src="https://....gif" width="54" height="1" alt></td>
        <td>
            <img src="https://....gif" width="14" height="1" alt></td>
        <td>
            <img src="https://....gif" width="20" height="1" alt></td>
        <td>
            <img src="https://....gif" width="115" height="1" alt></td>
        <td>
            <img src="https://....gif" width="4" height="1" alt></td>
        <td>
            <img src="https://....gif" width="49" height="1" alt></td>
        <td>
            <img src="https://....gif" width="49" height="1" alt></td>
        <td>
            <img src="https://....gif" width="40" height="1" alt></td>
        <td>
            <img src="https://....gif" width="77" height="1" alt></td>
        <td>
            <img src="https://....gif" width="28" height="1" alt></td>
        <td>
            <img src="https://....gif" width="12" height="1" alt></td>
        <td>
            <img src="https://....gif" width="1" height="1" alt></td>
        <td>
            <img src="https://....gif" width="39" height="1" alt></td>
        <td>
            <img src="https://....gif" width="47" height="1" alt></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
    </body>
</html>

IGS电子邮件(1)
[[trackingImage]]

如果我在macOS桌面上的Chrome中打开你的HTML,然后放大或缩小,我会遇到与你的屏幕截图完全相同的渲染问题。我猜问题在于,你手机上的Gmail应用程序会自动缩放电子邮件以适应屏幕,因此呈现的效果与我们在Chrome桌面上看到的效果类似


我的建议是首先去掉带有
colspan
rowspan
的巨型表,并将其替换为单个嵌套表。您还可以尝试制作更简单的图像切片,以帮助自动缩放。如果您能在Chrome浏览器中以不同的缩放级别将其正确显示,那么在您的手机上就应该可以了。

Image only电子邮件通常都能做到这一点。用于桌面的图像被压缩以适应小屏幕。试着看看在所有图像上添加显示块是否能解决这个问题。大多数电子邮件设计师都会说,640像素左右是你应该追求的最大宽度,对于最小的手机来说,它可以降低到280像素。我很谦虚地建议您使用HTML(而不是基于图像的),这样您就可以在手机上实现可读性。可能还有许多其他设备无法工作。请参阅Litmus,了解如何进行测试以及最终生成的代码是什么。