【发布时间】：2016-12-19 20:11:22
【问题描述】：
我正在创建一个 HTML 电子邮件，它适用于大多数客户端。我的设计依赖于邮件开头的图像。它必须在最顶端。然而，在 Outlook 中，邮件会在整个邮件周围显示一个边框。顶部大约 20 像素，侧面大约 10 像素。到目前为止，这是我的代码：
<!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">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<!-- Web Font / @font-face : BEGIN -->
<!--[if mso]>
<style>
* {font-family: Arial, Verdana, sans-serif !important;}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800,300' rel='stylesheet' type='text/css'>
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<style type="text/css">
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
Margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
img {
-ms-interpolation-mode:bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
</style>
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
@media screen and (max-width: 480px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
Margin-left: auto !important;
Margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
Margin-left: auto !important;
Margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
Margin-left: auto !important;
Margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body width="100%" bgcolor="28bffe" style="margin: 0; padding: 0;">
<div style="background-color:#28bffe;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" size="100%,35%" src="images/bg.jpg" color="#28bffe"/>
</v:background>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse; margin:0; padding:0;">
<tr><td valign="top" align="left" background="images/bg.jpg" style="background-size: 100% auto; background-repeat: no-repeat; ">
<center style="width: 100%;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
Title
</div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Main Body Container for Snippets: Begin -->
<div style="max-width: 600px; margin: auto;">
<!--[if (gte mso 9)|(IE)]>
<table cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Body : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="" width="100%" style="max-width: 600px;">
<tr>
<td style="text-align: center; margin:0; padding: 0; line-height: 0; font-size: 0;">
<img src="images/hero.gif" width="600" height="" alt="Whoop" border="0" align="center" style="width: 100%; max-width: 600px;outline:none; line-height: 0; font-size: 0; margin:0; padding: 0;">
</td>
</tr>
<tr>
<td style="padding: 25px 0; text-align: center; font-family: 'Open Sans', Arial, Verdana, sans-serif; font-size: 18px; mso-height-rule: exactly; line-height: 23px; color: #000000; font-weight:normal;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatiopbus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</td>
</tr>
<tr>
<td style="text-align: center;">
<img src="images/slogan.png" width="600" height="" alt="Whoop" border="0" align="center" style="width: 100%; max-width: 600px;outline:none;">
</td>
</tr>
</table>
<!-- Email Body : END -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!-- Main Body Container for Snippets: END -->
<!-- Main Body Container for Snippets: Begin -->
<div style=" margin: auto;">
<!--[if (gte mso 9)|(IE)]>
<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Body : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="" width="100%" >
<tr style="background-color: #1a1a1a;">
<td style="text-align: center;">
<img src="images/pier.jpg" width="276" height="" alt="Whoop" border="0" align="center" style="width: 100%; max-width: 276px;outline:none; padding: 10px 0;">
</td>
</tr>
<tr style="background-color: #1a1a1a;">
<td style="text-align: center; font-family: 'Open Sans', Arial, Verdana, sans-serif; font-size: 12px; mso-height-rule: exactly; line-height: 15px; font-weight:normal;">
<br><webversion style="text-decoration: none; color: #8a8a8a;">WEBVERSION LINK</webversion><br>
<br><unsubscribe style="text-decoration: none; color: #8a8a8a;">UNSUB LINK</unsubscribe><br><br><br><br>
</td>
</tr>
</table>
<!-- Email Body : END -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!-- Main Body Container for Snippets: END -->
</center>
</td></tr>
</table>
</div>
</body>
有谁知道这个问题并知道如何解决这个问题？问题出在 Outlook 2007,10,11。
【问题讨论】：
标签： html email outlook html-email