3
У меня есть разработанное электронное письмо, и он проходит все правильные тесты и хорошо выглядит во всех почтовых клиентах, которые я тестировал (используя Litmus), один - Outlook 2013 120DPI.HTML Email Outlook 2013 120DPI background
Я понимаю, что делает эта версия и как она преобразует определенные элементы px единиц в точки и шкалы по-разному, и это нормально. Однако реальная проблема связана с фоновым изображением.
Таблица, в которой имеет фоновое изображение, требует установки высоты, чтобы отображать содержимое внутри. Поэтому я устанавливаю высоту как фоновое изображение. Но в этой версии Outlook, потому что контент масштабируется, его пропускают через эту высоту.
Во всех других почтовых клиентах это нормально, и содержимое расширяет таблицу, чтобы соответствовать ей. Но в Outlook 2013 120DPI контент обрезается. Точно так же, как переполнение: скрытый, но ничего подобного не устанавливается.
Любые мысли вообще были бы с благодарностью оценены.
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<title>TEST TITLE</title>
<style type="text/css">
.ReadMsgBody {
width: 100%;
background-color: #ebebeb;
}
.ExternalClass {
width: 100%;
background-color: #ebebeb;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}
body {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
.yshortcuts a {
border-bottom: none !important;
}
@media only screen and (max-width: 480px) {
table[class="columns-container"] {
width: 320px !important;
}
td[class="content_mobile"] {
width: 320px !important;
}
table[class="table_content_column"] {
width: 278px !important;
}
td[class="content_column"] {
width: 278px !important;
}
td[class="left_margin"] {
max-width:21px !important;
width: 21px !important;
}
td[class="right_margin"] {
max-width:21px !important;
width: 21px !important;
}
img[class="float"] {
float:left !important; \t \t
}
}
</style>
<!--[if gte mso 15]>
<style type="text/css" media="all">
/* Outlook 2013 Height Fix */
body { font-size: 0; line-height: 0; }
tr { font-size:1px; mso-line-height-alt:0; mso-margin-top-alt:1px; }
</style>
<![endif]-->
</head>
<body style="background-color: #cdcdcd;">
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" width="100%" style="background-color: #cdcdcd; table-layout: fixed; background-repeat: no-repeat;">
<tbody>
<tr>
<td class="">
<!-- Table Content Open -->
<table cellpadding="0" cellspacing="0" border="0" class="columns-container" width="600" align="center">
<tbody>
<tr>
<td height="24" colspan="3">
</td>
</tr>
<tr>
<td class="content_mobile" background="email1_bg_v2.jpg" bgcolor="#000000" width="600" height="675" valign="top" colspan="3" style="background-repeat: no-repeat; align:left; background-size: 600px 675px; width:600px;height:675px;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" width="600" height="675" fill="true" stroke="false" style="width:600px;height:675px; background-size: 600px 675px; background-repeat: no-repeat; align:left;">
<v:fill type="frame" src="email1_bg_v2.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="600" class="columns-container">
<tbody>
<tr>
<!-- Left Column Padding -->
<td width="60" class="left_margin">
</td>
<!-- Centre Column -->
<td width="390" class="content_column">
<table cellpadding="0" cellspacing="0" border="0" width="390" valign="top" class="table_content_column">
<!-- Spacer -->
<tbody>
<tr>
<td height="60" width="390" class="content_column">
</td>
</tr>
<tr>
<td width="390" class="content_column">
Logo Image
</td>
</tr>
<!-- Spacer -->
<tr>
<td height="60" width="390" class="content_column">
</td>
</tr>
<tr>
<td style="color:#ffffff; font-family:Arial, sans-serif; font-size:20px; line-height:30px;" width="390" class="content_column">
Headline
</td>
</tr>
<!-- Spacer -->
<tr>
<td height="30" width="390" class="content_column">
</td>
</tr>
<tr>
<td style="color:#ffffff; font-family:Arial, sans-serif; font-size:15px; line-height:21px;" width="390" class="content_column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
<!-- Spacer -->
<tr>
<td height="30" width="390" class="content_column">
</td>
</tr>
</tbody>
</table>
</td>
<!-- Right Column Padding -->
<td width="150" class="right_margin">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
<!-- Footer -->
<tr>
<!-- Right Column Padding -->
<td height="38" width="38" bgcolor="#f3f1f1" class="left_margin">
</td>
<td height="38" width="524" bgcolor="#f3f1f1" align="right" class="content_column">
FOOTER LOGO
</td>
<!-- Right Column Padding -->
<td height="38" width="38" bgcolor="#f3f1f1" class="right_margin">
</td>
</tr>
<!-- Footer - Closed-->
</tbody>
</table>
<!-- Table Content Closed -->
</td>
</tr>
</tbody>
</table>
</body>
</html>
* ОБНОВЛЕНИЕ * На самом деле проблема с Outlook 2013 120DPI –
Изменен заголовок в соответствии с вашими комментариями. – Paul