我已经在Yahoo和Outlook（台式机和Android）上对此进行了测试，没有任何问题。在Gmail桌面上也可以。
但是在我的Android手机上，当我在Gmail中查看时，图像的不同部分之间出现了奇怪的间隙。
其中一张图片将您分成三张单独的图片，然后将它们放在一起，以便可以围绕一张文字表。
图片： Rendering on Gmail Android
<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>|Winsby Test|</title>
<style type="text/css">
/*RESETS*/
body {
width:100% !important;
margin: 0 !important;
padding: 0px;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background-color: #ffffff;
mso-margin-top-alt: 0px;
mso-margin-bottom-alt: 0px;
mso-padding-alt: 0px 0px 0px 0px;
}
* {
box-sizing: content-box;
}
/*Outlook*/
.ReadMsgBody {width:100%;}
/*Hotmail*/
.ExternalClass {width:100%;}
table td {border-collapse:collapse;}
img {
outline: none;
border: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
/*End of RESETS*/
/*Media Query*/
@media screen and (max-width: 580px) {
.full-width{width: 100%!important; height: auto!important}
}
/*End of Media Query*/
</style>
</head>
<body style="margin: 0px; color: black;">
<center>
<!-- OVERALL TABLE -->
<TABLE width="600" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #000; margin:0 auto;" bgcolor="#ffffff" class="full-width">
<!-- HEADER -->
<tr>
<td style="padding:20px 10px 10px 10px" align="center">
<a href="https://www.winsbyinc.com/" target="_blank">
<img width="150" height="31" src="https://i.imgur.com/s6hPxBz.png" alt="Winsby" border="0" style="padding: 0px; margin: 0px auto; display:block;" class="">
</a>
</td>
</tr>
<!-- END OF HEADER -->
<!-- SNIPPET 1 -->
<tr>
<!-- TOP SECTION OF IMG -->
<td>
<img width="600" height="150" src="https://i.imgur.com/ZpEoAnR.jpg" alt="How an Industry Analysis Gave One Company their Strategy" border="0" style="padding: 0px; margin: 0px; display:block;" align='texttop' class="full-width">
</td>
</tr>
<tr>
<td>
<!-- TWO COLUMN STRUCTURE TABLE -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- COLUMN 1: MIDDLE LEFT SECTION OF IMG -->
<td>
<img width="269" height="371" src="https://i.imgur.com/fC2n6KY.jpg" alt="" border="0" style="display:block;" align='texttop' class="">
</td>
<!-- END OF COLUMN 1 -->
<!-- COLUMN 2: TEXT | CTA | BOTTOM RIGHT SECTION OF IMG -->
<td valign="bottom">
<!-- NESTED TABLE -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:0; font-size: 14px;">
<p style="margin:0 0 0 24px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #85AB30; line-height: 14px;mso-line-height-rule: exactly;"><strong>The Plan</strong></p>
<p style="margin:24px 24px 0 45px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height: 16px;mso-line-height-rule: exactly; color: #4f4f51">
One company had a wide range of<br>
customers and couldn’t figure out the<br>
best industries to focus on to optimize<br>
their growth. They sent 3 years of data to<br>
Winsby for an industry analysis.</p>
</td>
</tr>
<tr>
<td style="padding: 24px 24px 0 32px; font-size: 14px;">
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #85AB30; line-height: 14px;mso-line-height-rule: exactly;"><strong>The Results</strong></p>
<p style="margin:0 0 0 13px; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height: 16px;mso-line-height-rule: exactly; color: #4f4f51">
The industry analysis showed very clearly<br>
which industries should be targeted for<br>
growth—the ones that were the most<br>
profitable and showed solid growth.<br>
There were a few that they dropped,<br>
because they were losing money with<br>
customers in these industries.</p>
</td>
</tr>
<tr>
<td style="padding: 15px 24px 24px 32px;">
<!-- CTA TABLE -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0 10px 0 0; font-size:14px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.winsbyinc.com/contactus.html" style="margin: 0;height:30px;v-text-anchor:middle;width:140px;" arcsize="5%" fillcolor="#ef4300">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial;font-size:14px;">
Contact Us Today
</center>
</v:roundrect>
<![endif]-->
<a href="https://www.winsbyinc.com/contactus.html" style="margin:0;background-color:#ef4300;border-radius:3px;color:#ffffff; display:inline-block;text-align:center;text-decoration:none; padding: 7px 15px;-webkit-text-size-adjust:none;mso-hide:all; font-family: Arial, Helvetica, sans-serif; font-size:14px; mso-line-height-rule: exactly;">Contact Us Today</a>
</td>
<td style="padding: 0 0 0 10px;font-size:14px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.winsbyinc.com/thebasics.html" style="margin:0;height:30px;v-text-anchor:middle;width:110px;" arcsize="5%" fillcolor="#ef4300">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial;font-size:14px;">
Learn More
</center>
</v:roundrect>
<![endif]-->
<a href="https://www.winsbyinc.com/thebasics.html" style="margin:0;background-color:#ef4300;border-radius:3px;color:#ffffff; display:inline-block;text-align:center;text-decoration:none; padding: 7px 20px;-webkit-text-size-adjust:none;mso-hide:all; font-family: Arial, Helvetica, sans-serif; font-size:14px; mso-line-height-rule: exactly;">Learn More</a>
</td>
</tr>
</table>
<!-- END OF CTA TABLE -->
</td>
</tr>
<tr>
<td>
<!-- BOTTOM RIGHT SECTION OF IMG -->
<img width="331" height="28" src="https://i.imgur.com/GfWI4i2.jpg" alt="" border="0" style="display:block;" align='texttop' class="">
</td>
</tr>
</table>
<!-- END OF NESTED TABLE -->
</td>
<!-- END OF COLUMN 2 -->
</tr>
</table>
<!-- END OF TWO COLUMN STRUCTURE TABLE -->
</td>
</tr>
<!-- END OF SNIPPET 1 -->
<!-- SNIPPET 2 -->
<tr>
<td>
<a href="https://www.winsbyinc.com/bp-keymetrics.php?keymetricsoftenignored.php">
<img width="600" height="96" src="https://i.imgur.com/nRSVgMn.jpg" alt="What key metrics are most important in evaluating your business?" border="0" style="display:block; margin: 1px 0 0 0;" class="full-width">
</a>
</td>
</tr>
<!-- END OF SNIPPET 2 -->
<!-- SNIPPET 3 -->
<tr>
<td>
<!-- TWO COLUMN STRUCTURE -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- COLUMN 1: IMG -->
<td style="padding:25px 25px 25px 25px;">
<img width="158" height="357" src="https://i.imgur.com/M4nqeGv.jpg" alt="" border="0" style="padding: 0px; margin: 0px; display:block;" class="">
</td>
<!-- END COLUMN 1 -->
<!-- COLUMN 2: HEADLINE | TEXT | CTA -->
<td valign="bottom" style="padding: 0 0 25px 0;">
<!-- NESTED TABLE -->
<table border="0" cellpadding="0" cellspacing="0">
<!-- HEADLINE -->
<tr>
<td>
<!-- HEADLINE | TEXT -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="300" style="padding:0 0 24px 0">
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:20px; color: #004580; mso-line-height-rule: exactly;"><strong>
How Customer Satisfaction<br>
Surveys Can Identify<br>
Your Problems</strong></p>
</td>
<td valign="top">
<img width="51" height="51" src="https://i.imgur.com/gFSQeks.png" alt="" border="0" class="">
</td>
</tr>
<tr>
<td colspan="2" style="padding: 0 0 24px 0;">
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #85AB30; line-height: 14px;mso-line-height-rule: exactly;"><strong>The Challenge</strong></p>
<p style="margin:0 0 0 13px; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height: 16px;mso-line-height-rule: exactly; color: #4f4f51">
One company was losing customers but couldn’t<br>
figure out what they were doing wrong. The feedback<br>
on the job was always very good, so they couldn’t<br>
understand the loss in business. They asked Winsby<br>
to complete customer satisfaction surveys across all<br>
their locations.</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding: 0 0 24px 0;">
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #85AB30; line-height: 14px;mso-line-height-rule: exactly;"><strong>The Results</strong></p>
<p style="margin:0 0 0 13px; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height: 16px;mso-line-height-rule: exactly; color: #4f4f51">
Their billing department was making so many<br>
mistakes that customers were leaving out of<br>
frustration! <strong>They changed procedures in billing,<br>
and their growth became steady again.</strong></p>
</td>
</tr>
</table>
<!-- END OF HEADLINE | TEXT -->
</td>
</tr>
<!-- END OF HEADLINE -->
<tr>
<td>
<!-- CTA -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="180">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.winsbyinc.com/thebasics.html" style="margin:0;height:30px;v-text-anchor:middle;width:140px;" arcsize="5%" fillcolor="#ef4300">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial;font-size:14px;">
Learn More
</center>
</v:roundrect>
<![endif]-->
<a href="https://www.winsbyinc.com/thebasics.html" style="margin:0;background-color:#ef4300;border-radius:3px;color:#ffffff; display:inline-block;text-align:center;text-decoration:none; padding: 7px 35px;-webkit-text-size-adjust:none;mso-hide:all; font-family: Arial, Helvetica, sans-serif; font-size:14px; mso-line-height-rule: exactly;">Learn More</a>
</td>
<td>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.winsbyinc.com/contactus.html" style="margin:0;height:30px;v-text-anchor:middle;width:180px;" arcsize="5%" fillcolor="#ef4300">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial;font-size:14px;">
Contact Us Today
</center>
</v:roundrect>
<![endif]-->
<a href="https://www.winsbyinc.com/contactus.html" style="margin:0;background-color:#ef4300;border-radius:3px;color:#ffffff; display:inline-block;text-align:center;text-decoration:none; padding: 7px 35px;-webkit-text-size-adjust:none;mso-hide:all; font-family: Arial, Helvetica, sans-serif; font-size:14px; mso-line-height-rule: exactly;">Contact Us Today</a>
</td>
</tr>
</table>
<!-- END OF CTA -->
</td>
</tr>
</table>
<!-- END OF NESTED TABLE -->
</td>
</tr>
</table>
<!-- END OF TWO COLUMN STRUCTURE -->
</td>
</tr>
<!-- END OF SNIPPET 3 -->
<!-- SNIPPET 4 -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #004580;">
<tr>
<td style="padding:30px 30px 15px 30px;">
<p style="margin:0; font-family: Arial, Helvetica, sans-serif; font-size:14px; color: #ffffff; font-weight: 400;">
“Winsby manages about 95% of our marketing activities. They are<br>
relentless about growing our email list. As a result, we’re doing<br>
business with more people. We also find out about services that<br>
are working for other dealers early in the process.”</p>
</td>
</tr>
<tr>
<td valign="top" style="padding: 0 30px 30px 30px;">
<!-- NESTED TABLE -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" width="380">
<p style="margin:0; font-family: Arial, Helvetica, sans-serif; font-size:14px; color: #ffffff;">
Doug Juergensen<br>
Vice President & COO</p>
</td>
<td>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.winsbyinc.com/ourclient-distributors.php?luby.php" style="height:30px;v-text-anchor:middle;width:160px; margin: 0" arcsize="5%" fillcolor="#ffffff">
<w:anchorlock/>
<center style="color:#ef4300;font-family:Arial;font-size:14px;">
Read More
</center>
</v:roundrect>
<![endif]-->
<a href="https://www.winsbyinc.com/ourclient-distributors.php?luby.php" style="margin: 0;background-color:#ffffff;border-radius:3px;color:#ef4300; display:inline-block;text-align:center;text-decoration:none; padding: 7px 45px;-webkit-text-size-adjust:none;mso-hide:all; font-family: Arial, Helvetica, sans-serif; font-size:14px; mso-line-height-rule: exactly;">Read More</a>
</td>
</tr>
</table>
<!-- END of NESTED TABLE -->
</td>
</tr>
</table>
</td>
</tr>
<!-- END of SNIPPET 4 -->
<!-- FOOTER -->
<tr>
<td style="padding: 15px 30px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="122">
<p style="font-size:12px; font-family: Arial, Helvetica, sans-serif; text-decoration:none; ">
<a href="http://www.winsbyinc.com/" target="_blank" style="color: #4f4f51; text-decoration:none;"> <strong>winsbyinc.com</strong></a>
</p>
</td>
<td valign="top" width="109">
<p style="font-size:12px; font-family: Arial, Helvetica, sans-serif;color: #4f4f51; ">
<strong>312-870-5656</strong>
</p>
</td>
<td valign="top" width="164">
<p style="font-size:12px; font-family: Arial, Helvetica, sans-serif; ">
<a href="mailto:info@winsbyinc.com" target="_blank" style="color: #4f4f51; text-decoration:none;"><strong>info@winsbyinc.com</strong></a>
</p>
</td>
<td valign="middle" style="padding:0 7px;">
<a href="https://www.facebook.com/Winsby-Inc-298761360208356/" target="_blank">
<img style="display:block;" border="0" src="https://i.imgur.com/AkLaYJM.png" width="25" height="25" alt="Facebook">
</a>
</td>
<td valign="middle" style="padding:0 7px;">
<a href="https://www.linkedin.com/company/winsby-inc" target="_blank">
<img style="display:block;" border="0" src="https://i.imgur.com/dbCdDvF.png" width="25" height="25" alt="LinkedIn">
</a>
</td>
<td valign="middle" style="padding:0 7px;">
<a href="https://twitter.com/WinsbyInc" target="_blank">
<img style="display:block;" border="0" src="https://i.imgur.com/vNMJ2YT.png" width="25" height="25" alt="Twitter">
</a>
</td>
<td valign="middle" style="padding:0 0 0 7px;">
<a href="https://plus.google.com/112324557107413325569" target="_blank">
<img style="display:block;" border="0" src="https://i.imgur.com/Q6pfV0F.png" width="25" height="25" alt="Google Plus">
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- END OF FOOTERs -->
</TABLE>
<!-- End of OVERALL TABLE -->
</center>
</body>
</html>