为什么 Gmail 强制标题文本向左，图像向右？答案

【问题标题】：Why does Gmail force header text to the left and image to the right?为什么 Gmail 强制标题文本向左，图像向右？
【发布时间】：2016-06-22 19:37:51
【问题描述】：

我正在发送一个电子邮件营销活动，其中主要包括一个用于正文的图像和两个并排的文本句子作为图像顶部的标题。该电子邮件在桌面甚至 Outlook 上看起来都很好，但是一旦它在 Gmail 和 Android 上的 Gmail 应用程序中打开，它就会中断，并且标题文本被强制向左，而我的图像被强制向右。这是一个示例： Gmail Misalign Sample 1

我知道 Gmail 的表格很奇怪，我在这个网站上尝试了几个建议，但似乎没有任何效果。如果有人看到我做错了什么，我将不胜感激。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!doctype html>
<html>
<head>
<title>Chase Run Realtor Preview - March 22, 2016</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    
<style type="text/css">
		body,#bodyTable,#bodyCell{
			height:100% !important;
			margin:0;
			padding:0;
			width:100% !important;
		}
		table{
			border-collapse:collapse;
		}
		img,a img{
			border:0;
			outline:none;
			text-decoration:none;
		}
		h1,h2,h3,h4,h5,h6{
			margin:0;
			padding:0;
		}
		p{
			margin:1em 0;
			padding:0;
		}
		a{
			word-wrap:break-word;
		}
		.ReadMsgBody{
			width:100%;
		}
		.ExternalClass{
			width:100%;
		}
		.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
			line-height:100%;
		}
		table,td{
			mso-table-lspace:0pt;
			mso-table-rspace:0pt;
		}
		#outlook a{
			padding:0;
		}
		img{
			-ms-interpolation-mode:bicubic;
		}
		body,table,td,p,a,li,blockquote{
			-ms-text-size-adjust:100%;
			-webkit-text-size-adjust:100%;
		}
		.mcnImage{
			vertical-align:bottom;
		}
		.mcnTextContent img{
			height:auto !important;
		}
		a.mcnButton{
			display:block;
		}
		body,.backgroundColor{
			background-color:#c9c8c5;
			background-position:top left;
			background-repeat:repeat;
		}
	table { border-collapse:collapse; 
		    mso-table-lspace:0pt; 
		    mso-table-rspace:0pt; 
	    }
	
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" offset="0">

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
    	<td width="100%" valign="top" bgcolor="c9c8c5" style="padding-top:20px">
            
<!-- BEGIN PREHEADER // -->
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td align="center" valign="top">
                                                    <table border="0" cellpadding="0" cellspacing="0" width="665">
                                                        <tr>
                                                            <td valign="top" style="padding-top:5px; padding-bottom:9px;"><table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tbody>
        <tr>
            <td valign="top" align="center">
                
                <table align="left" border="0" cellpadding="0" cellspacing="0" width="366">
                    <tbody><tr>
                        
                        <td valign="top" style="padding-top:9px; padding-left:18px; padding-bottom:9px; padding-right:0;">
                        
                            <span style="font-family:verdana,geneva,sans-serif; font-size: 12px; color: #606060;">Experience Luxury - Chase Run Realtor Preview</span>
                        </td>
                    </tr>
                </tbody></table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="220">
                    <tbody><tr>
                        
                        <td valign="top" style="padding-top:9px; padding-right:18px; padding-bottom:9px; padding-left:0;">
                        
                            <a href="*|ARCHIVE|*" target="_blank" style="text-decoration: none; color: #606060; font-size: 12px; font-family:verdana,geneva,sans-serif;"><strong>View email in your browser</strong></a>
                        </td>
                    </tr>
                </tbody></table>
                
            </td>
        </tr>
    </tbody>
</table></td>
                                                 
<!-- END PREHEADER // --> 
			
<!-- MAIN BODY START // -->   
            
<table width="665" height="1120" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" margin="0" style="border-collapse:collapse; mso-table-rspace:0pt;">
	<tr align="center" style="line-height:0;font-size:0;">
        
		<td align="center" style="line-height:0;font-size:0;min-width:665" height="1120" margin="0">
        <div style="height:1120px; max-width:665px; min-width:650px;" border="0" cellpadding="0" cellspacing="0">
        <img src="https://gallery.mailchimp.com/0c1d06cd6f55ea378fdda7348/images/323ca46e-43bf-4caf-b110-ba41fffc09f5.png" style="display: block; min-width:650px;" width="665" height="1120" alt="Chase Run Realtor Preview - March 22nd"></div></td>
        
</tr></table> 
        <table width="665" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                    <tbody><tr>
     <td align="center" style="padding-top:16px; padding-right: 18px; padding-bottom: 9px; padding-left: 18px; min-width:665; font-size: 12px; font-family:verdana,geneva,sans-serif; color: #606060;">
		 
    <a href="*|UNSUB|*" class="utilityLink" style="text-decoration: none; color: #616161;">unsubscribe from this list</a>&nbsp;&nbsp;&nbsp;
    <a href="*|UPDATE_PROFILE|*" class="utilityLink" style="text-decoration: none; color: #616161;">update subscription preferences</a>&nbsp;
    <br>
    <br><br>
    

                        </td>															
															
</tr></table></td></tr></table></body>
</html>

【问题讨论】：

Gmail 忽略 <style> 标签
您的代码不是有效的 HTML，我看到 pre header 没有正确关闭。此外，不建议将<table align="left"> 和<table align="center"> 并排使用。使用一个 table 和两个相邻的 <td>，其中包含文本。

标签： android html email gmail

【解决方案1】：

特别是对于电子邮件，最好避免在标题中使用样式标签。大多数客户不阅读它们，并且普遍认为，在电子邮件环境中，最好的做法是内联样式。有一件事，如果您真的想使用样式，那么让试金石在各种环境中测试电子邮件可能是个好主意。

【讨论】：