如何修复 IE 的流畅布局电子邮件？答案

【问题标题】：How do I fix fluid layout email for IE?如何修复 IE 的流畅布局电子邮件？
【发布时间】：2014-05-08 05:15:54
【问题描述】：

我正在处理一些具有响应式布局的电子邮件。它们在大多数情况下都有效，但某些版本的 IE 会产生各种错误。电子邮件显示为空白，但内容只是在一个巨大的窗口中居中（我认为这是电子邮件客户端允许的最大大小）。如果 max-width 不是一个选项，我如何限制 IE 的电子邮件大小？谢谢！

这是我目前拥有的示例：

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Email</title>
<style type="text/css">
@media only screen and (min-device-width: 541px) {
  .content {
    width: 540px !important;
  }
  }
</style>
</head>
<body>
<!--[if (gte mso 9)|(IE)]>
<table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
  <td>
<![endif]-->
<table bgcolor="#e4e4e4" width="100%" cellpadding="0" cellspacing="0" style="margin:0;">
 <tbody>
  <tr>
   <td bgcolor="#acacac" width="100%" cellspacing="0" style="margin:0; padding-left:5%;">
<!--The guts of the email...-->
</td>
</tr>
</tbody>
</table>


<!--[if (gte mso 9)|(IE)]>
  </td>
</tr>
</table>
<![endif]-->
 </body>
</html>

【问题讨论】：

标签： html css internet-explorer html-email fluid-layout

【解决方案1】：

至少有几种方法可以让您的电子邮件具有响应性或自适应性。

第一种方法是为每个“列”创建单独的表格，并在您的容器太窄而无法容纳两者时将它们包裹起来。（见示例 1）

第二种方法是像往常一样在表格中创建列，并在您希望它们折叠成行时将显示设置为阻止。（见示例 2）

示例 1：

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" name="viewport" content="text/html; charset=utf-8; initial-scale=1" />
        <title>Method 1</title>
        <style type="text/css">
          @media only screen and (max-width:600px) {
            table[class=container], table[class=responsiveTable] {width: 100% !important;}
          }
        </style>
      </head>
      <body>
        <table class="container" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
          <tr>
            <td>
              <table class="responsiveTable" border="0" cellspacing="0" cellpadding="0" width="50%" align="left">
                <tr>
                  <td bgcolor="#dddddd" align="center">FIRST COLUMN</td>
                </tr>
              </table>
              <table class="responsiveTable" border="0" cellspacing="0" cellpadding="0" width="50%" align="left">
                <tr>
                  <td bgcolor="#aaaaaa" align="center">SECOND COLUMN</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>

示例 2：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" name="viewport" content="text/html; charset=utf-8; initial-scale=1" />
        <title>Method 2</title>
        <style type="text/css">
          @media only screen and (max-width:600px) {
            table[class=container], td[class=responsiveCell] {width: 100% !important;}
            td[class=responsiveCell] {display: block !important;}
          }
        </style>
      </head>
      <body>
        <table class="container" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
          <tr>
            <td>
              <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                  <td class="responsiveCell" bgcolor="#dddddd" width="50%" align="center">FIRST COLUMN</td>
                  <td class="responsiveCell" bgcolor="#aaaaaa" width="50%" align="center">SECOND COLUMN</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>

【讨论】：