3
私は電子メールを作成しており、すべての適切なテストに合格しており、テストした（Litmusを使用して）バー1 - Outlook 2013 120DPIのすべてのメールクライアントでうまくいきます。HTML電子メールOutlook 2013 120DPIの背景
私はこのバージョンが何をしているのか、特定の要素のpx単位をポイントとスケールに変換する方法を理解しています。しかし、実際の問題は背景イメージに関するものです。
内部にコンテンツを表示するには、背景画像が含まれているテーブルに高さを設定する必要があります。だから私は背景画像と同じになるように高さを設定しています。しかし、この見通しのバージョンでは、コンテンツがスケーリングされているため、この高さを超えてプッシュされています。
他のすべての電子メールクライアントでは、これは問題ありません。コンテンツは、それに合わせてテーブルを拡張します。しかし、Outlook 2013の120DPIでは、コンテンツが切り取られます。 Overflow：hiddenと同じように、何も設定されていません。
ご迷惑をおかけして申し訳ありません。
<!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