如何解决我的HTML电子邮件在台式机，iOS Gmail和Android Gmail上看起来不错如何消除<td>之间的怪异空白？
这里真的很困惑。我不知道如何检查手机上的Gmail应用程序中的元素，以了解CSS是否有效。在我妈妈的手机上，台式机上，Android上的gmail.com上，电子邮件看上去都很不错，但在Android上的gmail应用上却看不到。
在我添加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://igsprotection.com/wp-content/uploads/2020/09/IGSemailblast1_01.jpg" width="47" height="907" alt></td>
<td colspan="22">
<img src="https://igsprotection.com/wp-content/uploads/2020/09/IGSemailblast1_02.jpg" width="706" height="26" alt></td>
<td rowspan="11">
<img src="https://igsprotection.com/wp-content/uploads/2020/09/IGSemailblast1_03.jpg" width="47" height="907" alt></td>
</tr>
<tr>
<td colspan="4">
<a href="https://igsprotection.com/about-us-security-guard-houston/" target="_blank">
<img src="https://igsprotection.com/wp-content/uploads/2020/09/aboutpage.jpg" width="64" height="16" border="0" alt="aboutpage"></a></td>
<td colspan="3">
<img src="https://igsprotection.com/wp-content/uploads/2020/09/IGSemailblast1_05.jpg" width="45" height="16" alt></td>
<td colspan="2">
<a href="https://igsprotection.com/security-guard-services-houston/" target="_blank">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/servicespage.jpg" width="95" height="16" border="0" alt="servicespage"></a></td>
<td colspan="3">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_07.jpg" width="88" height="16" alt></td>
<td colspan="2" rowspan="3">
<a href="https://igsprotection.com" target="_blank">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/logo.jpg" width="119" height="134" border="0" alt="logo"></a></td>
<td colspan="2">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_09.jpg" width="98" height="16" alt></td>
<td colspan="2">
<a href="https://igsprotection.com/industries-served/" target="_blank">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/industriespage.jpg" width="117" height="16" border="0" alt="industriespage"></a></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_11.jpg" width="28" height="16" alt></td>
<td colspan="3">
<a href="https://igsprotection.com/security-jobs/" target="_blank">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/jobspage.jpg" width="52" height="16" border="0" alt="jobspage"></a></td>
</tr>
<tr>
<td colspan="12">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_13.jpg" width="292" height="27" alt></td>
<td colspan="8">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_14.jpg" width="295" height="27" alt></td>
</tr>
<tr>
<td colspan="12">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_15.jpg" width="292" height="91" alt></td>
<td colspan="8">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_16.jpg" width="295" height="91" alt></td>
</tr>
<tr>
<td colspan="2">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_17.jpg" width="40" height="124" alt></td>
<td colspan="18">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_18.jpg" width="626" height="124" alt></td>
<td colspan="2">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_19.jpg" width="40" height="124" alt></td>
</tr>
<tr>
<td colspan="2">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_20.jpg" width="40" height="492" alt></td>
<td colspan="19">
<img src="https://igsprotection.com/wp-content/uploads/2020/09/emailbody.jpg" width="627" height="492" alt="emailbody"></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_22.jpg" width="39" height="492" alt></td>
</tr>
<tr>
<td colspan="22">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_23.jpg" width="706" height="26" alt></td>
</tr>
<tr>
<td colspan="22">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_24.jpg" width="706" height="16" alt></td>
</tr>
<tr>
<td colspan="11" rowspan="3">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_25.jpg" width="272" height="89" alt></td>
<td colspan="2">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_26.jpg" width="135" height="15" alt></td>
<td colspan="9" rowspan="3">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_27.jpg" width="299" height="89" alt></td>
</tr>
<tr>
<td colspan="2">
<a href="https://igsprotection.com/review/" target="_blank">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/reviewbutton.jpg" width="135" height="45" border="0" alt="reviewbutton"></a></td>
</tr>
<tr>
<td colspan="2">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_29.jpg" width="135" height="29" alt></td>
</tr>
<tr>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_30.jpg" width="47" height="30" alt></td>
<td colspan="22">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_31.jpg" width="706" height="30" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_32.jpg" width="47" height="30" alt></td>
</tr>
<tr>
<td rowspan="2">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_33.jpg" width="47" height="60" alt></td>
<td>
<a href="https://www.facebook.com/internationalguardservices" target="_blank">
<img src="https://igsprotection.com/wp-content/uploads/2020/09/facebook-igs.jpg" width="22" height="30" border="0" alt="facebook-igs"></a></td>
<td colspan="2">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_35.jpg" width="22" height="30" alt></td>
<td colspan="2">
<a href="https://www.instagram.com/internationalguardservices/" target="_blank">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/instagram-igs.jpg" width="29" height="30" border="0" alt="instagram-gs"></a></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_37.jpg" width="20" height="30" alt></td>
<td colspan="2">
<a href="https://www.linkedin.com/company/igsprotection/" target="_blank">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/linkedin-igs.jpg" width="33" height="30" border="0" alt="linkedin-igs"></a></td>
<td colspan="2">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_39.jpg" width="132" height="30" alt></td>
<td colspan="5">
<a href="https://igsprotection.com" target="_blank">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/url.jpg" width="202" height="30" border="0" alt="url"></a></td>
<td colspan="2">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_41.jpg" width="89" height="30" alt></td>
<td colspan="5">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/phonenumber.jpg" width="157" height="30" alt="phonenumber"></td>
<td rowspan="2">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_43.jpg" width="47" height="60" alt></td>
</tr>
<tr>
<td colspan="22">
<img src="https://igsprotection.com/wp-content/uploads/2020/10/IGSemailblast1_44.jpg" width="706" height="30" alt></td>
</tr>
<tr>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="47" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="22" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="18" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="4" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="20" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="9" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="20" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="16" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="17" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="78" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="54" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="14" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="20" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="115" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="4" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="49" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="49" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="40" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="77" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="28" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="12" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="1" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="39" height="1" alt></td>
<td>
<img src="https://igsprotection.com/wp-content/uploads/2020/10/spacer.gif" width="47" height="1" alt></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
解决方法
如果我在macOS上的台式机上的Chrome中打开您的HTML，并且放大或缩小，则会遇到与您的屏幕截图完全相同的渲染问题。我的猜测是问题在于，您手机上的Gmail应用正在自动缩放电子邮件以适合屏幕大小，因此呈现的外观与我们在Chrome桌面中看到的外观类似。
我的建议是，首先使用colspan和rowspan摆脱巨型表，然后将其替换为单个嵌套表。您也可以尝试制作更简单的图像切片以帮助自动缩放。如果您设法在Chrome中以不同的缩放级别正确设置它，则在手机上应该可以。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
