Как мне исправить флюид макет электронной почты для IE?

Question

Как мне исправить флюид макет электронной почты для IE?

0

Я работаю над некоторыми сообщениями с гибкими макетами. Они работают в большинстве случаев, но некоторые версии IE создают различные ошибки. Письмо отображается пустым, но контент просто сосредоточен в огромном окне (я предполагаю, что это максимальный размер, который позволят почтовые клиенты). Как ограничить размер электронной почты для IE, если max-width не является опцией? Благодарю!

Вот пример того, что у меня есть на данный момент:

<!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>

kpb 20 март 2014, в 20:24

Источник

Теги:

html

css

internet-explorer

html-email

fluid-layout

1 ответ

Ещё вопросы

Narong · Answer 1 · 2014-05-07T19-17-00.000Z

Есть, по крайней мере, несколько способов, чтобы ваши электронные письма были отзывчивыми или адаптивными.

Первый метод заключается в создании отдельных таблиц для каждого столбца и их обертывания, когда ваш контейнер слишком узкий, чтобы соответствовать обоим. (См. Пример 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>