0
Я создаю электронную почту HTML, и она отлично работает для большинства клиентов. Мой дизайн зависит от изображения, с которого начинается Почта. Он должен быть на самом верху. Однако в Outlook Mail отображает рамку вокруг всей почты. Наверху это как 20px и по сторонам около 10px. Вот мой код до сих пор:Изображение поверх почты, отображающей дополнительное пространство в верхней части экрана outlook
<!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