Question

我正在处理一些带有响应式布局的电子邮件。它们适用于大多数情况，但某些版本的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>

Answer 1

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

第一种方法是为每个＆＃34;列创建单独的表＆＃34;当你的容器太窄而不适合两者时让它们包裹起来。（见例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>

如何修复IE的流体布局电子邮件？

1 个答案: