Outlook 中的 HTML 电子邮件预览（最新版本）

【问题标题】：HTML Email Preview in Outlook (Latest Version)Outlook 中的 HTML 电子邮件预览（最新版本）
【发布时间】：2023-03-07 07:22:01
【问题描述】：

我正在尝试创建 HTML 电子邮件预览。电子邮件预览在 Gmail、Yahoo、Hotmail 和 Mobile View 上运行良好，但不幸的是它不适用于 Outlook。我尝试了多个属性，但仍然失败。我附上这个问题的原始视图和外观视图，也在这里分享我的工作。请检查并相应指导。原始电子邮件视图如下

虽然 Outlook 上的预览看起来像这样

我附上下面的代码以获得帮助

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Shirt Mailer</title>

<style type="text/css">
	
	@font-face {
		font-family: 'Helvetica Neue';
		src: url(http://www.biads.co.uk/uneek-emails/fonts/HelveticaNeue-Medium.ttf) format('truetype'),
			 url(http://www.biads.co.uk/uneek-emails/fonts/HelveticaNeue-Light.ttf) format('truetype');
		font-style: normal;
		font-weight: 400;
	}
	
	body {
		-moz-box-sizing: border-box;
		-ms-text-size-adjust: 100%;
		-webkit-box-sizing: border-box;
		-webkit-text-size-adjust: 100%;
		box-sizing: border-box;
		color: #000000;
		font-family: 'Helvetica Neue';
		font-size: 16px;
		font-weight: normal;
		line-height: 1;
		margin: 0;
		min-width: 100%;
		padding: 0;
		text-align: left;
		width: 100% !important;
	}
	
	table {
		width: 640px;
		margin: 0 auto 30px;
	}
	
	.logo {
		width: 250px;
		margin: 25px 0;
	}
	
	.nav td a {
		color: white;
		text-decoration: none;
		height: 36px;
		line-height: 36px;
	}
	
	.full-img {
		width: 100%;
		margin-top: 10px;
	}
	
	 .top-banner-img {
		width: 640px !important;
	} 
	
	.mb {
		margin-bottom: 15px;
	}
	
	.head3 {
		font-size: 17px;
	}
	
	.social-media {
		padding-left: 0px;
		margin-left: -10px;
	}
	
	.social-media li {
		list-style-type: none;
		display: inline-block;
	}
	
	.social-media li img {
		margin-left: 10px;
	}
	
	.wb-img {
		margin-left: 15px !important;
	}
	
	.unsub-link {
		color: black;
	}
	
</style>

</head>

<body>
	<table cellpadding="0" cellspacing="0">
		<tr align="center">
			<td colspan="7">
				<a href="http://www.uneekclothing.com/" target="_blank">
					<img src="http://www.biads.co.uk/uneek-emails/img/logo-black.png" alt="uneek logo" class="logo" />
				</a>
			</td>
		</tr>
		<tr bgcolor="#000000" class="nav" align="center">
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C7__Polos" target="_blank">Polos</a>
			</td>
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C5__Sweats" target="_blank">Sweats</a>
			</td>
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C8__T-Shirts" target="_blank">T-Shirts</a>
			</td>
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C3__Shirts" target="_blank">Shirts</a>
			</td>
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C2__Jackets" target="_blank">Jackets</a>
			</td>
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C1__Hi-Viz" target="_blank">Hi-Vis</a>
			</td>
			<td width="14.8%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C6__Childrenswear" target="_blank">Childrens</a>
			</td>
		</tr>
		<tr>
			<td colspan="7">
				<a href="https://www.uneekclothing.com/en-GB/product__UC713__Men's_Tailored_Fit_Long_Sleeve_Poplin_Shirt?category=3" target="_blank">
					<img src="http://www.biads.co.uk/uneek-emails/img/top_banner.jpg" alt="uneek clothing" class="full-img top-banner-img" />
				</a>
			</td>
		</tr>
		<tr>
			<td colspan="3">
				<a href="https://www.uneekclothing.com/en-GB/product__UC714__Men's_Tailored_Fit_Short_Sleeve_Poplin_Shirt?category=11" target="_blank">
					<img src="http://www.biads.co.uk/uneek-emails/img/bottom_left.gif" alt="" class="full-img mb">
				</a>
			</td>
			<td></td>
			<td colspan="3">
				<a href="https://www.uneekclothing.com/en-GB/product__UC713__Men's_Tailored_Fit_Long_Sleeve_Poplin_Shirt?category=11" target="_blank">
					<img src="http://www.biads.co.uk/uneek-emails/img/bottom_right.gif" alt="" class="full-img mb">
				</a>
			</td>
		</tr>
		<tr align="center" bgcolor="#f6f6f6">
			<td colspan="4">
				<h3 class="head3">Follow Our Socials!</h3>
				<ul class="social-media">
					<li>
						<a href="https://www.facebook.com/uneekclothing.uk" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/5.png" alt="" />
						</a>
					</li>
					<li>
						<a href="https://twitter.com/totallyuneek" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/6.png" alt="" />
						</a>
					</li>
					<li>
						<a href="https://www.instagram.com/totallyuneek/" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/7.png" alt="" />
						</a>
					</li>
					<li>
						<a href="https://www.youtube.com/channel/UC5XAHW8qF8KcQL_8FCKkxMA" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/8.png" alt="" />
						</a>
					</li>
				</ul>
			</td>
			<td>
				<h3 class="head3">Website</h3>
				<ul class="social-media">
					<li>
						<a href="http://www.uneekclothing.com/" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/9.png" alt="" class="wb-img" />
						</a>
					</li>
				</ul>
			</td>
			<td>
				<h3 class="head3">Brochure</h3>
				<ul class="social-media">
					<li>
						<a href="" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/10.png" alt="" class="wb-img" />
						</a>
					</li>
				</ul>
			</td>
			<td></td>
		</tr>
		<tr align="center" bgcolor="#f6f6f6">
			<td colspan="7">
				<p>We have big things on the horizon, are you sure you don't want to hear about them?</p>
				<p>Unsubscribe <a href="*|UNSUB|*" class="unsub-link" target="_blank"><strong>here</strong></a>.</p>
			</td>
		</tr>
	</table>
</body>
</html>

【问题讨论】：

    标签： html css outlook html-email


    【解决方案1】：

    • Outlook 不能与 Helvetica Neue 一起使用。名称中包含空格且不适用于大多数 webfonts 的字体名称似乎存在问题。你需要一个网络安全的后备字体。我可能会推荐 Trebuchet MS。

    • Outlook 倾向于忽略 &lt;style&gt; 工作表中的图像值。所以.full-img 不会对图像产生影响。像这样添加宽度值：&lt;img src="#" width="400" /&gt;

    • 如果一个元素有多个类，Outlook 可能会忽略除第一个类之外的所有内容。

    • Outlook 对 margin 和 padding 的支持参差不齐。

    • Outlook 忽略 list-style-type

    • colspan 只会让您在 html 电子邮件中心碎。

    关于您创建电子邮件的方式存在很多问题。例如，使用li 代替td 进行水平显示。

    祝你好运。

    【讨论】：

    • 顶部导航栏 - 我无法添加行高、填充...有什么建议吗？
    • 另外，邮件以其他邮件客户端为中心，但在outlook中左对齐，有什么解决办法？
    • @KashifLatif 我在回答中提到对填充的支持参差不齐。尝试将填充移动到td。
    • 在进行这些更改后，现在对前景的看法要好得多。谢谢
    • 关于 Outlook 中完整电子邮件左对齐的任何想法？
    【解决方案2】：

    Desktop Outlook 使用 MS Word 渲染引擎，因此它不会读取“头部”中的 CSS 样式，因此您也需要使用内联样式。

    我还建议使用“!--if (gte mso 9)”为 Outlook 添加额外的换行，以解决大多数布局问题。

    看看下面的电子邮件模板，它应该可以帮助您解决问题。您应该能够围绕此重新创建模板。

    尝试将容器大小保持在最大 680 像素，尽管在大多数情况下 600 像素就可以了。 

    <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8"><!-- utf-8 works for most cases -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Forcing initial-scale shouldn't be necessary -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Use the latest (edge) version of IE rendering engine -->
      <meta name="x-apple-disable-message-reformatting"><!-- Disable auto-scale in iOS 10 Mail entirely -->
      <title></title>

      <style type="text/css">
        /* CLIENT-SPECIFIC STYLES */
        body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        img { -ms-interpolation-mode: bicubic; }

        /* RESET STYLES */
        img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
        table { border-collapse: collapse !important; }
        body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

        /* iOS BLUE LINKS */
        a[x-apple-data-detectors] {
          color: inherit !important;
          text-decoration: none !important;
          font-size: inherit !important;
          font-family: inherit !important;
          font-weight: inherit !important;
          line-height: inherit !important;
        }

        /* MOBILE STYLES */
        @media screen and (max-width: 600px) {
          .img-max {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
          }

          .max-width { max-width: 100% !important; }

          .mobile-wrapper {
            width: 85% !important;
            max-width: 85% !important;
          }

          .mobile-padding {
            padding-left: 5% !important;
            padding-right: 5% !important;
          }
        }

        /* ANDROID CENTER FIX */
        div[style*="margin: 16px 0;"] { margin: 0 !important; }
      </style>
    </head>
    <body style="margin: 0 !important; padding: 0; !important background-color: #ffffff;" bgcolor="#ffffff">

      <!-- HIDDEN PREHEADER TEXT -->
      <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
        Lorem ipsum dolor que ist
      </div>

      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td align="center" valign="top" width="100%" background="bg.jpg" bgcolor="#3b4a69" style="background: #3b4a69 url('bg.jpg'); background-size: cover; padding: 50px 15px 0 15px;" class="mobile-padding">
            <!--[if (gte mso 9)|(IE)]>
              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                  <td align="center" valign="top" width="600">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
              <tr>
                <td align="center" valign="top" style="padding: 0 0 20px 0;">
                  <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/envelope-icon.png" width="50" height="50" border="0" style="display: block;">
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
                  <h1 style="font-size: 40px; color: #ffffff;">Product Announcement</h1>
                  <p style="color: #b7bdc9; font-size: 20px; line-height: 28px; margin: 0;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </p>
                </td>
              </tr>
              <tr>
                <td align="center" style="padding: 30px 0 0 0;">
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td align="center" style="border-radius: 28px;" bgcolor="#75b6c9">
                        <a href="https://codepen.io" target="_blank" style="font-size: 18px; font-family: Open Sans, Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 28px; background-color: #75b6c9; padding: 16px 28px; border: 1px solid #75b6c9; display: block;">
                          Learn more &rarr;
                        </a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="padding: 50px 0 0 0;">
                  <img src="http://pluspng.com/img-png/mac-computer-screen-png-pin-screen-clipart-mac-computer-2-1024.png" width="600" height="268" border="0" alt="Insert alt text here" style="display: block; color: #ffffff; font-family: sans-serif; font-size: 24px;" class="img-max">
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
            <![endif]-->
          </td>
        </tr>
        <tr>
          <td align="center" height="100%" valign="top" width="100%" style="padding: 0 15px;" class="mobile-padding">
            <!--[if (gte mso 9)|(IE)]>
              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                  <td align="center" valign="top" width="600">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
              <tr>
                <td align="center" valign="top">
                  <img src="https://imageog.flaticon.com/icons/png/512/178/178158.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF" width="600" height="109" border="0" style="display: block;" class="img-max">
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="padding: 50px 0 0 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
                  <h2 style="font-size: 28px; color: #444444;">Design emails people love</h2>
                  <p style="color: #999999; font-size: 18px; line-height: 28px; margin: 0;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </p>
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
            <![endif]-->
          </td>
        </tr>
        <tr>
          <td align="center" height="100%" valign="top" width="100%">
            <!--[if (gte mso 9)|(IE)]>
              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                  <td align="center" valign="top" width="600">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
              <tr>
                <td align="center" valign="top" style="font-size:0; padding-bottom: 25px; border-bottom: 2px solid #eeeeee;">
                  <!--[if (gte mso 9)|(IE)]>
                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                      <tr>
                        <td align="left" valign="top" width="280">
                  <![endif]-->
                  <div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%;" class="mobile-wrapper">
                    <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:280px;" class="max-width">
                      <tr>
                        <td align="left" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">

                          <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/favourite-heart-icon.png" width="280" height="196" border="0" alt="Insert alt text here" style="display: block; border: 0px; color: #999999; font-family: sans-serif; font-size: 18px;" class="img-max">

                          <h3 style="font-size: 18px; line-height: 24px;">I &hearts; Email</h3>
                          <p style="color: #999999; font-size: 16px; line-height: 24px;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <br><br>
                            <a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">
                              Read more &rarr;
                            </a>
                          </p>

                        </td>
                      </tr>
                    </table>
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="20" style="font-size: 1px;">&nbsp;</td>
                        <td align="right" valign="top" width="280">
                  <![endif]-->
                  <div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%;" class="mobile-wrapper">
                    <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:280px; float: right;" class="max-width">
                      <tr>
                        <td align="left" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">

                          <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/envelope-icon.png" width="280" height="196" border="0" alt="Insert alt text here" style="display: block; border: 0px; color: #999999; font-family: sans-serif; font-size: 18px;" class="img-max">

                          <h3 style="font-size: 18px; line-height: 24px;">I &hearts; Email</h3>
                          <p style="color: #999999; font-size: 16px; line-height: 24px;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <br><br>
                            <a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">Read more &rarr;</a>
                          </p>

                        </td>
                      </tr>
                    </table>
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                        </td>
                      </tr>
                    </table>
                  <![endif]-->
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
            <![endif]-->
          </td>
        </tr>
        <tr>
          <td align="center" height="100%" valign="top" width="100%" style="padding: 25px 0 50px 0;">
            <!--[if (gte mso 9)|(IE)]>
              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                  <td align="center" valign="top" width="600">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
              <tr>
                <td align="center" valign="top" style="font-size:0;">
                  <!--[if (gte mso 9)|(IE)]>
                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                      <tr>
                        <td align="left" valign="top" width="190">
                  <![endif]-->
                  <div style="display:inline-block; max-width:33.3333%; min-width:190px; vertical-align:top; width:100%;" class="mobile-wrapper">

                    <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:190px;" class="max-width">
                      <tr>
                        <td align="center" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">

                          <img src="http://www.iconarchive.com/download/i98301/dakirby309/simply-styled/Gmail.ico" width="50" height="50" border="0" style="display: block;">

                          <h3 style="font-size: 18px; line-height: 24px;">Gmail</h3>
                          <p style="color: #999999; font-size: 14px; line-height: 20px;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <br><br>
                            <a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">Read more &rarr;</a>
                          </p>

                        </td>
                      </tr>
                    </table>
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="15" style="font-size: 1px;">&nbsp;</td>
                        <td align="left" valign="top" width="190">
                  <![endif]-->
                  <div style="display:inline-block; max-width:33.3333%; min-width:190px; vertical-align:top; width:100%;" class="mobile-wrapper">
                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:190px;" class="max-width">
                      <tr>
                        <td align="center" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">

                          <img src="https://www.freeiconspng.com/uploads/outlook-icon-0.png" width="50" height="50" border="0" style="display: block;">

                          <h3 style="font-size: 18px; line-height: 24px;">Outlook</h3>
                          <p style="color: #999999; font-size: 14px; line-height: 20px;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <br><br>
                            <a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">
                              Read more &rarr;
                            </a>
                          </p>

                        </td>
                      </tr>
                    </table>
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="15" style="font-size: 1px;">&nbsp;</td>
                        <td align="left" valign="top" width="190">
                  <![endif]-->
                  <div style="display:inline-block; max-width:33.3333%; min-width:190px; vertical-align:top; width:100%;" class="mobile-wrapper">
                    <table align="right" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:190px; float: right;" class="max-width">
                      <tr>
                        <td align="center" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">

                          <img src="https://www.freeiconspng.com/uploads/cricle-twitter-emblem-png-clipart-8.png" width="50" height="50" border="0" style="display: block;">

                          <h3 style="font-size: 18px; line-height: 24px;">Twitter</h3>
                          <p style="color: #999999; font-size: 14px; line-height: 20px;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <br><br>
                            <a href="https://twitter.com" target="_blank" style="text-decoration: none; color: #75b6c9;">
                              Read more &rarr;
                            </a>
                          </p>

                        </td>
                      </tr>
                    </table>
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                        </td>
                      </tr>
                    </table>
                  <![endif]-->
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
            <![endif]-->
          </td>
        </tr>
        <tr>
          <td align="center" height="100%" valign="top" width="100%" bgcolor="#f6f6f6" style="padding: 40px 15px;">
            <!--[if (gte mso 9)|(IE)]>
              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                  <td align="center" valign="top" width="600">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
              <tr>
                <td align="center" valign="top" style="padding: 0 0 5px 0;">
                  <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/envelope-icon.png" width="35" height="35" border="0" style="display: block;">
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif; color: #999999;">
                  <p style="font-size: 14px; line-height: 20px;">
                    London<br>
                    United Kingdom
                    <br><br>
                    <a href="*|VIEW-ONLINE|*" style="color: #999999;" target="_blank">View Online</a>
                    &nbsp; &bull; &nbsp;
                    <a href="*|UNSUBSCRIBE|*" style="color: #999999;" target="_blank">Unsubscribe</a>
                  </p>
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
            <![endif]-->
          </td>
        </tr>
      </table>
    </body>
  </html>

    【讨论】：

    • 这与 MS Word 渲染引擎无关，而是与一般电子邮件支持中的 HTML/CSS 无关。见这里：stackoverflow.com/questions/9136002/…
    • 其实这个例子是和MS Word渲染引擎有关。其他电子邮件客户端读取 中的 CSS，桌面 Outlook 几乎是唯一不读取的。
    • 啊，对了，对不起，我的印象是我们仍然必须像 1999 年那样写电子邮件。总有一个人不得不破坏它的其余部分。
    • HTML 电子邮件在过去几年中取得了长足的进步，但还不完美，我们仍然必须使用表格，但现在的支持比几年前要多得多。一些有价值的阅读材料可以在这里找到：litmus.com/blog 和这里：thebetter.email/design
    • @ScottieG 网络字体（如 Open Sans）永远无法在 Outlook 中使用。
    猜你喜欢
    • 1970-01-01
    • 2012-06-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-27
    • 2017-01-24
    • 1970-01-01
    • 2017-12-15
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode