【发布时间】：2016-11-11 19:55:21
【问题描述】：
亲爱的网络开发者你好！
我在手机上的 Outlook 客户端中显示电子邮件时遇到了问题，甚至在我的台式 PC 上的 Outlook 中显示。
当我在 Outlook 中收到我的电子邮件并在 IE 中打开它时，我尝试调整它的大小，当它遇到需要切换到@media 屏幕的断点时，一切都中断了。几乎每个手机上的 Outlook 客户端都会出现这种情况。
事情就是这样。当我在 IE 中打开的那封电子邮件上按 F12 时，我看到我的宽度内联样式被划掉并且 .col 类生效。但它仍然没有正确和响应地显示电子邮件。这只发生在前景中。知道如何解决吗？
下面是部分代码：
<style>
@media screen and (max-width: 525px) {
/* FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/*COLUMNS TO ROWS */
.col {
display: block!important;
width: 100%!important;
border: none!important;
}
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
.wide {
width: 100% !important;
}
}
</style>
<table style="padding-top: 0px;padding-right: 15px;padding-bottom: 0px;padding-left: 15px;table-layout: auto;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 15px;padding-bottom: 20px;padding-left: 15px; background-color: rgb(255, 255, 255);" class="section-pad" align="center">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="700">
<tr>
<td align="center" valign="top" width="700">
<![endif]-->
<table style="max-width: 700px;table-layout: auto;" class="wide" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="background-color: rgb(236, 242, 248);">
<!-- HERO IMAGE -->
<table style="table-layout: auto; background-color: rgb(236, 242, 248); width: 92%;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td class="col" align="center" valign="top" style="width: 65%; padding-left: 0px; background-color: rgb(236, 242, 248);">
<table style="table-layout: auto; background-color: white; padding-left: 10px; padding-right: 10px;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 0;padding-left: 20px;font-size: 26px;line-height: 30px;font-weight:400; font-family: Arial, sans-serif; color: #0056a6;" align="left"><img src="/resources/handlers/dcimage.ashx" style="height: auto; display: inline;" border="0">,</td>
</tr>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; font-size: 14px; font-weight:normal; line-height: 14px; font-family: Arial, sans-serif; color: #2d353d;" align="left">
LOREM IPSUM
</td>
</tr>
</tbody>
</table>
</td>
<td style="background-color: rgb(236, 242, 248); width: 35%; padding-right: 0px;" class="col" align="center" valign="top">
<p valign="middle" style="line-height: 40px; font-size: 12px; color: white; font-family: Arial, sans-serif; background-color: rgb(0, 86, 166);">
In case you need to contact us</p>
<img src="/r1.jpg" alt="telephone" class="img-max" border="0" height="50" width="240">
<img src="/r2.jpg" alt="skype" class="img-max" border="0" height="50" width="240">
<img src="/r3.jpg" alt="mail" class="img-max" border="0" height="50" width="240">
<img src="/r4.jpg" alt="web" class="img-max" border="0" height="50" width="240">
</td>
</tr>
<tr>
<td class="col" align="center" valign="top" style="width: 65%;">
<img src="/r2.jpg" class="img-max">
</td>
<td style="background-color: rgb(236, 242, 248); width: 35%;" class="col" align="center" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
【问题讨论】：
-
请注意，当我从我的 td 中删除 col 类时，一切都很好，但响应部分并不好 :D 我应该让 Outlook 以它想要的方式运行吗？
标签： html-email responsive