HTML 电子邮件 : Images go beyond its limited width in outlook

Question

我有这些图片。它们在 Gmail 中工作正常，但是当我在 outlook 中看到时，所有 5 张图片都出现在单个 <tr> 中并扩展表格的默认宽度。

我想要的是，前四张图像应该位于第一行的中心，如果还有更多图像，则应该换行。但在同一个<tr> .我不想分开 <tr>对于相同的。我已经这样做了。在 Gmail 中看起来不错。但它在 outlook 中扩展了它的宽度，我必须使它们正确。我已阅读有关相同的文章。但没有得到太多。

所以，如果我在这个问题上得到帮助，那就太好了。

谢谢。

<table width="600" cellspacing="0" cellpadding="0" border="0" style="  background: #fa4b00;margin: 0 auto !important; padding: 0px; max-width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; text-align: center;" >


                    <tr>
                        <td height="20"></td>
                    </tr>

                    <tr>

                        <td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
                            <img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="120" width="120" >
                            <p style=" width: 100%; text-align:center; font-size:10px;word-break: normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600; ">XYZ</p>
                            <p style=" width: 100%; text-align:center; font-size:8px;word-break: normal;  text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: white; "> XYZ </p>
                        </td>


                        <td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
                            <img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="120" width="120" >
                            <p style=" width: 100%; text-align:center;  font-size:10px;word-break: normal ; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
                            <p style=" width: 100%; text-align:center; font-size:8px; word-break: normal ; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>

                        </td>


                        <td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">

                            <img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg" border="0" height="120" width="120" >
                            <p style=" width: 100%; text-align:center; font-size:10px;word-break: normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
                            <p style=" width: 100%; text-align:center; font-size:8px;word-break: normal;  text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;">XYZ  </p>
                        </td>




                        <td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
                            <img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="120" width="120" >
                            <p style=" width: 100%; text-align:center; font-size:10px;word-break:normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
                            <p style=" width: 100%; text-align:center; font-size:8px;word-break: normal;  text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>

                            <p style="padding-bottom: 30px;"></p>

                        </td>



                        <td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
                            <img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="120" width="120" >
                            <p style=" width: 100%; text-align:center; font-size:10px;word-break:normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
                            <p style=" width: 100%; text-align:center; font-size:8px;word-break: normal;  text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>

                            <p style="padding-bottom: 30px;"></p>

                        </td>
</tr>
  </table>

Answer 1

您将 TD 设置为 display:inline-block，这对于表格元素来说并没有多大意义。表格单元格的全部要点在于它的行为类似于表格单元格。

也许这就是问题所在；如果您使用的是 Outlook 应用程序或其他任何应用程序，它将具有与 Chrome 不同的渲染引擎。这样渲染引擎可以决定忽略表格单元格上的 display:inline-block。

我很确定如果您只是删除表格内容并将每个图像包装在一个 DIV 中而不是它会可靠地工作。

jsFiddle