我的 HTML 电子邮件在桌面和 iOS Gmail 上看起来不错，但在 Android Gmail 上看起来不怎么样。如何消除 <td> 之间的奇怪空格？
My HTML email looks good on desktop, and iOS Gmail, but not Android Gmail. How do I eliminate the weird whitespace in between <td>?
这里真的很困惑。我不知道如何在我的 phone 上检查 Gmail 应用程序中的元素以了解 CSS is/isn 哪些内容不起作用。电子邮件在我妈妈的 phone、桌面上、在 gmail.com 在我的 android 上看起来很棒，但在 Android.
上的 gmail 应用程序上看起来不错
这是我的 phone 上的错误显示，然后是正确显示的：
在我添加 font-size: 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>
如果我在 macOS 桌面上的 Chrome 中打开您的 HTML，然后放大或缩小，我会遇到与屏幕截图中完全相同的渲染问题。我的猜测是问题在于 phone 上的 Gmail 应用程序是 auto-scaling 适合屏幕的电子邮件，因此呈现与我们在 Chrome 中在桌面上看到的类似的呈现。
我的建议是首先用 colspan 和 rowspan 摆脱巨大的 table，并将其替换为单独的嵌套 table。您也可以尝试制作更简单的图像切片以帮助 auto-scaling。如果您设法在 Chrome 中以不同的缩放级别使其正确，那么在您的 phone.
上应该没问题
这里真的很困惑。我不知道如何在我的 phone 上检查 Gmail 应用程序中的元素以了解 CSS is/isn 哪些内容不起作用。电子邮件在我妈妈的 phone、桌面上、在 gmail.com 在我的 android 上看起来很棒，但在 Android.
上的 gmail 应用程序上看起来不错这是我的 phone 上的错误显示，然后是正确显示的：
在我添加 font-size: 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>
如果我在 macOS 桌面上的 Chrome 中打开您的 HTML，然后放大或缩小，我会遇到与屏幕截图中完全相同的渲染问题。我的猜测是问题在于 phone 上的 Gmail 应用程序是 auto-scaling 适合屏幕的电子邮件，因此呈现与我们在 Chrome 中在桌面上看到的类似的呈现。
我的建议是首先用 colspan 和 rowspan 摆脱巨大的 table，并将其替换为单独的嵌套 table。您也可以尝试制作更简单的图像切片以帮助 auto-scaling。如果您设法在 Chrome 中以不同的缩放级别使其正确，那么在您的 phone.