Windows 上 Outlook 2013/2016 的内联问题

Question

我试图让这 6 个内联列在桌面上每行 3 个，在移动设备上每行 2 个。

Outlook 幽灵 table 代码中的某些内容导致所有 6 个出现在一行上并拉伸 table。我尝试了 td、max-widths、min-widths 等硬宽度，但似乎没有任何效果。

它应该是什么样子：

如何在 Outlook 2013/2016 中显示Windows。

代码：

<html>
<head>
<meta charset="UTF-8">
<title>Hybrid Grid Master</title>
<style type="text/css">

  table td { border: 1px solid cyan;}
  @media only screen and (max-width: 600px) {
    .wrapper{width:95% !important;}
  }

</style>
</head>
<body style="margin:0; padding:0; background-color:#F8F8F8">
<center>

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F8F8F8" class="wrapper">
  <tr>
    <td align="center" valign="top" width="100%">
      <!--[if (gte mso 9)|(IE)]>
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
      <tr>
      <td align="center" valign="top" width="600">
      <![endif]-->
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#FFFFFF">
        <tr>
          <td align="center" valign="top" style="font-size:0;">
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
            <tr>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

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

Answer 1

Outlook 使用 Word 呈现 HTML 内容。查看以下描述受支持和不受支持的 HTML 元素、属性和级联样式表属性的文章：

希望它们对您有所帮助。

Answer 2

我可以通过在 Outlook 幽灵代码中添加来解决这个问题。因此，它只针对 Outlook 桌面客户端打破了它，这是打破它的地方。

Windows 上 Outlook 2013/2016 的内联问题

Inlining issue on Outlook 2013/2016 on Windows

html

email

outlook

outlook-2016