我正在创建一个HTML电子邮件，它在大多数客户端都能正常运行。我的设计依赖于邮件开头的图像。它需要处于最顶端。但是在Outlook中，Mail会在整个Mail周围显示一个边框。在它的顶部像20px，在侧面约10px。到目前为止，这是我的代码：
<!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。
中答案 0 :(得分：0)
目前我没有测试此功能的设施，但我尝试将 body和table 标记设置为具有以下样式：
style="margin: 0 0 0 0; padding:0 0 0 0;"
为各种版本的Outlook提供正确呈现它的最佳机会。
如果您能够发布完整的代码（或者仍然存在问题的简化版本），那么测试会更容易。