0
我创建一个HTML电子邮件，它在大多数客户端工作正常。我的设计依赖于Mail开头的图像。它需要位于最顶端。然而，在Outlook中，邮件在整个邮件周围显示一个边框。在它的顶部像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。
谢谢，我试过magin：0;和填充：0;在各个地方。该通讯不那么久，所以我包括了整个事情。你一般也有同样的问题吗？我在所有电子邮件中都有，这并不是什么大问题，因为在大多数邮件中，背景img并不重要。但是，我把这个电子邮件与背景相结合，所以定位非常重要。 – Niqql