Html Outlook 2007、2010中的2列响应电子邮件
我试图将这些图像并排保存在桌面和移动设备中，但在Outlook 2007、2010等设备中无法正常工作。包含图像的两列之间存在很大差距，图像超出了我创建的设置宽度。它适用于所有其他ESP，当然，Outlook的旧版本除外。你能告诉我我做错了什么吗Html Outlook 2007、2010中的2列响应电子邮件,html,css,html-email,outlook-2010,outlook-2007,Html,Css,Html Email,Outlook 2010,Outlook 2007,我试图将这些图像并排保存在桌面和移动设备中，但在Outlook 2007、2010等设备中无法正常工作。包含图像的两列之间存在很大差距，图像超出了我创建的设置宽度。它适用于所有其他ESP，当然，Outlook的旧版本除外。你能告诉我我做错了什么吗 <!DOCTYPE html> <html> <head> <title>Email</title> <meta charset="utf-8"> <meta name="v
<!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]-->
电子邮件
正文、表格、td、a{-webkit文本大小调整：100%；-ms文本大小调整：100%；}/*防止webkit和Windows mobile更改默认文本大小*/
表，td{mso table lspace:0pt；mso table rspace:0pt；}/*删除Outlook 2007及更高版本中表之间的间距*/
img{-ms插值模式：双三次；}/*允许在Internet Explorer中更平滑地渲染已调整大小的图像*/
img{边框：0；高度：自动；线条高度：100%；轮廓：无；文本装饰：无；}
表{边框折叠：折叠！重要；宽度：100%！重要；边框折叠：折叠；mso表lspace:0；mso表rspace:0；对齐项：居中；}
td{边界崩溃：崩溃！重要；}
正文{高度：100%！重要；边距：0！重要；填充：0！重要；宽度：100%！重要；}
a[x-apple-data-Detector]{
颜色：继承！重要；
文字装饰：无！重要；
字体大小：继承！重要；
字体家族：继承！重要；
字体大小：继承！重要；
行高：继承！重要；
}
@媒体屏幕和屏幕（最大宽度：525像素）{
.标题-img1{
最大宽度：425px！重要；
宽度：100%！重要；
高度：自动！重要；
}
.标题-img2{
最大宽度：175px！重要；
宽度：100%！重要；
高度：自动！重要；
}
.标题td{
最大宽度：425px！重要；
宽度：自动！重要；
高度：自动！重要；
填充：0px！重要；
保证金：0px！重要；
}
}
这将起作用。问题来自您的css。您已将宽度设置为100%且非常重要，因此它将覆盖您固定的600px宽度。这与Outlook不支持的
max width表格{边框折叠：折叠！重要；宽度：100%！重要；边框折叠：折叠；mso表格lspace:0；mso表格rspace:0；对齐项目：居中；}宽度：100%！重要信息align items:centeralign=“center”td另一个小问题是，您可能希望将
td