html - HTML 电子邮件中的图像高度未正确显示

Question

HTML 邮件顶部菜单中的图像未在 iPhone 邮件应用程序中正确显示。更具体地说，其中一些的高度。请看一下这个截图：

                                            <tr>
                                                <td>
                                                    <table border="0" cellspacing="0" cellpadding="0" summary="">
                                                        <tbody>
                                                            <tr>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/46x68/email-menu-2020-02-04_01.jpg" alt="New!" border="0" width="46" style="display: block; max-height: 68px; max-width: 46px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/88x68/email-menu-2020-02-04_02.jpg" alt="Leotards" border="0" width="88" style="display: block; max-height: 68px; max-width: 88px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/147x68/email-menu-2020-02-04_03.jpg" alt="Design Your Own" border="0" width="147" style="display: block; max-height: 68px; max-width: 147px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/64x68/email-menu-2020-02-04_04.jpg" alt="Shoes" border="0" width="64" style="display: block; max-height: 68px; max-width: 64px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/93x68/email-menu-2020-02-04_05.jpg" alt="Costumes" border="0" width="93" style="display: block; max-height: 68px; max-width: 93px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/52x68/email-menu-2020-02-04_06.jpg" alt="Sale" border="0" width="52" style="display: block; max-height: 68px; max-width: 52px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/160x68/email-menu-2020-02-04_07.jpg" alt="Teacher Wholesale" border="0" width="160" style="display: block; max-height: 68px; max-width: 160px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>

CSS：

        table[id="backgroundTable"] { padding: 0 !important; }
        img {
            width: 100% !important;
        }
        table {
            border-collapse: collapse !important;
        }
        td {
            margin: 0;
            padding: 0;
        }

菜单中的最后三个图像，服装、销售和教师批发，都是不同的高度。这只发生在 iPhone 邮件应用程序上。我在 Android Gmail、桌面、Outlook 等上进行了测试，但没有发生这种情况。请帮忙。

标签： htmlcsshtml-email

Answer 1

在电子邮件中设置元素的height属性总是一个好主意。<img>正如您在评论中提到的，还需要width: 100% !important;从 CSS 中删除声明。这可能会导致图像随着表格单元格扩展以填充可用空间而扩大。