Outlook 2007、2010中的2列響應式電子郵件

Question

我試圖將這些圖像並排放置在台式機和移動設備上，並且在Outlook 2007、2010等環境中不起作用。包含圖像的兩列之間有很大的空隙，並且圖像超出了設置的寬度我建立。 它可以在所有其他ESP中使用，但舊版本的Outlook（當然）除外。 你能告訴我我做錯了嗎？

<!DOCTYPE html>
<html>
<head>
<title>Email</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */


img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
table{border-collapse: collapse !important; width: 100% !important; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; align-items: center;}
td {border-collapse: collapse !important;}
body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}


a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}


@media screen and (max-width: 525px) {

.header-img1 {
max-width: 425px !important;
width: 100% !important;
height: auto !important;
}

.header-img2 {
max-width: 175px !important;
width: 100% !important;
height: auto !important;
}

.header-td {
max-width: 425px !important;
width: auto !important;
height: auto !important;
padding: 0px !important;
margin: 0px !important;
}

}
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="left" valign="bottom" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px;">
<tr>
<td align="left" valign="bottom">
<table cellpadding="0" cellspacing="0" border="0" width="600" style="max-width: 600px; width: 600px;">
<tr>
<td align="left" valign="bottom" width="70%" style="max-width: 425px;" class="header-td">
<a href="#" target="_blank">
<img src="" style="display: block; width: 425px;" alt="" class="header-img1"></a>
</td>
<td align="left" valign="bottom" width="30%" style="max-width: 175px;" class="header-td">
<a href="#" target="_blank">
<img src="" alt="" style="display: block; width: 175px;" class="header-img2"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>    
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

Answer 1

媒體查詢不適用於Outlook。 您應該嘗試使用表結構，其中圖像應在具有valign =“ top”的單行中位於單獨的td中

這將起作用。

Answer 2

問題來自您的CSS。 您已將寬度設置為100％且很重要，因此它會覆蓋固定的600px寬度。 這與Outlook不支持max-width一起使表格擴展到全寬。

table{border-collapse: collapse !important; width: 100% !important; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; align-items: center;}

只需刪除width: 100% !important ，您會很滿意。 還要align-items: center應該刪除align-items: center ，因為它是flexbox的一部分，並且對電子郵件的支持為零。 如果要使表格居中對齊，則將align="center"作為屬性添加到表格中（或在td上居中對齊）。

另外一件小事，您可能需要將td寬度更改為與圖像寬度匹配的固定寬度。

Outlook 2007、2010中的2列響應式電子郵件

問題描述

2 個解決方案

解決方案1
0 2018-08-22 07:58:33

解決方案2
0 已采納 2018-08-22 08:00:08

Outlook 2007、2010中的2列響應式電子郵件

問題描述

2 個解決方案

解決方案1 0 2018-08-22 07:58:33

解決方案2 0 已采納 2018-08-22 08:00:08

解決方案1
0 2018-08-22 07:58:33

解決方案2
0 已采納 2018-08-22 08:00:08