Outlook 中的 HTML 电子邮件预览（最新版本）
Kas*_*tif 2 html css outlook html-email
我正在尝试创建 HTML 电子邮件预览。电子邮件预览在 Gmail、Yahoo、Hotmail 和移动视图上运行良好，但遗憾的是在 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>Outlook 不适用于 Helvetica Neue。字体名称似乎存在问题，名称中含有空格，并且不适用于大多数网络字体。您需要一种网络安全的后备字体。我可能会推荐Trebuchet MS。
Outlook 往往会忽略
<style>工作表中图像的值。所以.full-img不会对形象造成影响。添加宽度值，如下所示：<img src="#" width="400" />如果一个元素有多个类，Outlook 可能会忽略第一个类之外的所有内容。
marginOutlook 对和 的支持参差不齐padding。Outlook 忽略
list-style-typecolspanhtml 电子邮件只会给您带来心碎。
您创建电子邮件的方式存在很多问题。例如，使用li而不是td水平显示。
祝你好运。