3
我已經開發了一個電子郵件，它通過了所有正確的測試，並且在我測試過的所有電子郵件客戶端（使用Litmus）第一棒 - Outlook 2013 120DPI中看起來不錯。HTML電子郵件展望2013 120DPI背景
我明白這個版本在做什麼以及它如何將某些元素px單位轉換爲點和以不同方式縮放，這很好。但是，真正的問題是關於背景圖像。
其中包含背景圖像的表格需要設置高度才能顯示其中的內容。所以我將高度設置爲等於背景圖像。但在這個版本的Outlook中，因爲內容被縮放，所以它被推送到這個高度。
在所有其他電子郵件客戶端中，這沒問題，並且內容擴展了表以適應它。但在Outlook 2013 120DPI中，內容被裁剪。以和Overflow相同的方式：隱藏，但是沒有設置那樣的東西。
任何想法都將不勝感激。
<!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