HTML签名在iPhone上无法正确显示

时间:2019-07-29 11:29:54

标签: html

我正在为从事实习的公司创建html签名。我已经取得了不错的成绩: good result

但是,当有人尝试从iPhone上打开带有此签名的邮件时,签名的显示方式将完全不同: bad result (仅在iPhone上和纵向方向上,横向或在其他智能手机上都没有问题)

我的代码主要基于表格。我试图用div代替表的使用,并使用flexbox,但这将意味着从零完全重新创建签名,我想避免使用它。

<div style="width: max-content">
    <table width="inherit" cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td width="120" style="vertical-align:middle;padding-right:8px">
                <a target="_blank" href="http://www.im-pact.fr/">
                    <img width="220" style="border:none"
                        src="http://www.im-pact.fr/wp-content/uploads/2019/07/logo-impact-V4.png">
                </a>
            </td>
            <td style="border-left:solid #000000 1px" width="11">
            </td>
            <td
                style="vertical-align: middle; text-align:left;color:#303030;font-size:11px;font-family:helvetica, arial;">
                <!-- TODO: indiquer le nom et le poste -->
                <table cellspacing="0" cellpadding="0" border="0" style="margin:0 4px 4px 0;display:inline">
                    <tr>
                        <td colspan="5"
                            style="text-align: center; vertical-align: middle; margin-right:4px;color:#303030;font-size:15px;font-family:helvetica, arial">
                            <a target="_blank" href="https://www.linkedin.com/in/gregoire-chapeaux/" style="font-size:20px; text-decoration: none; color:#303030">Grégoire <span style="font-weight: bold">CHAPEAUX</span></a> - Recherche et Développement
                        </td>
                    </tr>
                    <tr style="font-size:10px;">
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="padding-right:12px">
                            <a target="_blank" href="mailto:developpement@im-pact.fr"><img height="20" width="20" src="http://www.im-pact.fr/wp-content/uploads/2019/07/mail.png" alt="Mail"></a>
                        </td>
                        <td style="padding-right:12px">
                            <!-- TODO: indiquer le mail (dans le href="..." : lien, et dans le <a target="_blank">...</a> : texte affiché -->
                            <a target="_blank" href="mailto:developpement@im-pact.fr"
                                style="color:#45080c;text-decoration:none; font:11px helvetica, arial">developpement@im-pact.fr</a>
                        </td>
                        <td style="padding-right:12px">
                            <a href="tel:+336XXXXXXXX" target="_blank"><img height="20" width="20" src="http://www.im-pact.fr/wp-content/uploads/2019/07/mobile.png" alt="Mobile"></a>
                        </td>
                        <td style="padding-right:12px">
                            <!-- TODO: indiquer le numéro de téléphone perso -->
                            <a href="tel:+336XXXXXXXX" target="_blank"
                                style="text-decoration:none;color:#45080c; font:11px helvetica, arial">06 XX XX XX XX</a>
                        </td>
                        <td>
                            &nbsp;
                            <a target="_blank" href="https://www.youtube.com/channel/UCBQ9OVe3C5OmEdAcyj2Zq0g?ab_channel=IM-PACT/"
                                style="display: inline-block">
                                <img height="20" width="20" src="http://www.im-pact.fr/wp-content/uploads/2019/07/youtube.png" alt="YouTube"></a></td>
                    </tr>
                    <tr style="font-size:8px;">
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="padding-right:12px">
                            <a target="_blank" href="https://goo.gl/maps/keW8wAA7PxSe6KnM9"><img height="20" width="20" src="http://www.im-pact.fr/wp-content/uploads/2019/07/adress.png" alt="Adresse"></a>
                        </td>
                        <td style="padding-right:12px">
                            <!-- TODO: indiquer l'adresse de l'agence -->
                            <a target="_blank" href="https://goo.gl/maps/keW8wAA7PxSe6KnM9"
                                style="margin-right:8px;color:#45080c;font-size:11px;font-family:helvetica, arial; text-decoration:none;">12
                                boulevard Vaquez<br>63130 Royat</a>
                        </td>
                        <td style="padding-right:12px">
                            <a href="tel:+334XXXXXXXX" target="_blank"><img height="20" width="20" src="http://www.im-pact.fr/wp-content/uploads/2019/07/phone.png" alt="Phone"></a>
                        </td>
                        <td style="padding-right:12px">
                            <!-- TODO: indiquer le numéro de téléphone de l'agence -->
                            <a href="tel:+334XXXXXXXX" target="_blank"
                                style="text-decoration:none;color:#45080c; font:11px helvetica, arial">04 XX XX XX XX</a>
                        </td>
                        <td>
                            &nbsp;
                            <a target="_blank" href="https://www.linkedin.com/company/im-pact/"
                                style="display: inline-block">
                                <img height="20" width="20" src="http://www.im-pact.fr/wp-content/uploads/2019/07/linkedin.png" alt="LinkedIn"></a></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr style="font-size:10px;">
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3" style="text-align: center;">
                <i style="color:#000000;font-size:10px;font-family:helvetica, arial;">
                    En application de notre politique interne, mes courriers envoyés le soir et le week-end
                    n'appelent aucune
                    réponse immédiate.
                </i>
            </td>
        </tr>
    </table>
</div>

0 个答案:

没有答案