在启用了DPI Scaling的Outlook中,电子邮件看起来很奇怪

时间:2016-05-30 01:57:48

标签: html css email outlook html-email

我的HTML电子邮件模板在Outlook中看起来不错,但在计算机上未启用DPI扩展,但启用DPI扩展时,它看起来应该不应该。我尝试并实施了解决方案here但没有成功。

您可以通过DPI缩放here查看电子邮件的外观。它们应该是两个300x300的盒子并排。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
	<!--[if gte mso 9]><xml>
	<o:OfficeDocumentSettings>
	<o:AllowPNG/>
	<o:PixelsPerInch>96</o:PixelsPerInch>
	</o:OfficeDocumentSettings>
	</xml><![endif]-->
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="format-detection" content="date=no" />
	<meta name="format-detection" content="address=no" />
	<meta name="format-detection" content="telephone=no" />
    
    <style>
	body { padding:0 !important; margin:0 !important; display:block !important; background:#ececec; -webkit-text-size-adjust:none }
	img {display:block;}
	table {border-collapse: collapse;}
	table td {mso-table-lspace:0;mso-table-rspace:0;}
	@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
		#container {
			width:96% !important;
		}
		img {
			width:100% !important;
			height:auto !important;
		}
		.full-width {
			width:100% !important;
			height: auto !important;
			display:block !important;
			float:left !important;
	}
	
	</style>
</head>

<body bgcolor="#ececec" style="background-color:#ececec;">

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="mso-cellspacing: 0px; mso-padding-alt: 0px;width:100%;background-color:#ececec;">
  <tbody>
    <tr>
      <td><center>
      
      	<!-- start CONTAINER -->
        <table width="600" border="0" cellspacing="0" cellpadding="0" id="container" style="width:600px;mso-cellspacing: 0px; mso-padding-alt: 0px;" align="center">
            <tbody>
                <tr>
                    <td>
                    
                    	<!-- start HEADING -->
                        <table width="100%" border="0" cellspacing="0" cellpadding="30" style="mso-cellspacing: 0px; mso-padding-alt: 30px;">
                          <tbody>
                            <tr>
                              <td align="center">
                              	<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                                  <tbody>
                                    <tr>
                                      <td align="center">
                                      	<span style="font-size:32px;color:#AAAAAA;font-family:Arial,sans-serif;" class="searchResults"><b>SEARCH RESULTS FOR</b></span> &nbsp; <span style="font-size:32px;color:#ed1c24;font-family:Arial,sans-serif;" class="searchHashtag"><b>#HASHTAG</b></span>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <!-- end HEADING -->
                        
                        <!-- start SQUARE BLOCK -->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="mso-cellspacing: 0px; mso-padding-alt: 0px;">
                          <tbody>
                            <tr>
                              <td>
                              	<table width="100%" border="0" cellspacing="0" cellpadding="0" style="mso-cellspacing: 0px; mso-padding-alt: 0px;">
                                  <tbody>
                                    <tr>
                                      <td width="50%" valign="top" class="full-width" style="width:300px;height:300px;"><img src="https://placehold.it/600" width="300" height="300" /></td>
                                      <td width="50%" align="center" valign="middle" class="full-width" bgcolor="#002442" style="width:300px;height:300px;background-color:#002442;">
                                      	<table width="100%" border="0" cellspacing="0" cellpadding="20" align="center" style="width:300px;mso-cellspacing: 0px; mso-padding-alt: 20px;" class="full-width">
                                      	  <tbody>
                                      	    <tr>
                                      	      <td valign="middle" align="center" width="100%"><a href="#" style="font-size: 28px; font-family: 'Arial'; color: rgb(255, 255, 255); font-weight: bold; text-transform: uppercase; text-align: center;line-height:100%;text-decoration:none;">TITLE HERE</a><br><br>
<a href="#" style="font-size: 16px; font-family: 'Arial'; color: rgb(255, 255, 255); font-weight: normal; text-align: center; text-decoration:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ipsum magna, efficitur eget.</a></td>
                                   	        </tr>
                                   	      </tbody>
                               	      	</table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <!-- end SQUARE BLOCK -->
                    
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- end CONTAINER -->
      
      </center></td>
    </tr>
  </tbody>
</table>

</body>
</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案