在 iPhone 上呈现 CSS 电子邮件签名问题

Question

我正在为我的电子邮件重新签名。代码如下：

    <style>
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');
</style>
<table cellspacing="0" width="500" cellpadding="0" border="0" style="padding:20px 0 20px 0;">
    <tr>
        <td style="padding:0 9px 0 0;vertical-align: middle;" width="100" valign="top"> <img alt="Logo" width="100" style="width:100px;moz-border-radius:15%;khtml-border-radius:15%;o-border-radius:15%;webkit-border-radius:15%;ms-border-radius:15%;border-radius:15%;" src="https://i.ibb.co/FzTmBN9/testlogo.png" /> </td>
        <td style="border-left:0px solid;vertical-align: top;border-color:#acacac;padding:0 0 0 0px;" valign="middle">
            <table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.6;font-family:'Open Sans','Verdana','Geneva',sans-serif;font-size:12px;color: #000000;letter-spacing:.8px;">
                <tr>
                    <td> <span style="font: 12px 'Open Sans','Verdana','Geneva',sans-serif;color:#000000;">My Name</span> <span style="font-family:'Open Sans','Verdana','Geneva',sans-serif;color: #000000;">&nbsp;&nbsp;</span> </td>
                </tr>
                <tr>
                    <td style="padding: 5px 0;">
                        <div style="font-family: 'Lato','Verdana','Geneva',sans-serif;font-size:11px;color: #000000;letter-spacing:1.2px;">My Company</div>
                    </td>
                </tr>
                <tr>
                    <td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">line 1:&nbsp;</span> <span><a style="text-decoration:none;font-family:'Open Sans','Verdana','Geneva',sans-serif;color:#000000;" href="tel:+">123 456 7890</a></span> </td>
                </tr>
                <tr>
                    <td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">line 2:&nbsp;</span> <span><a style="text-decoration:none;font-family:'Open Sans','Verdana','Geneva',sans-serif;color:#000000;" href="tel:+">123 456 7891</a></span> </td>
                </tr>
                <tr>
                    <td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">https://&nbsp;</span> <span style="font-family:'Open Sans','Verdana','Geneva',sans-serif;"><a href="http://website.com" style="text-decoration: none;color:#000000;" target="_blank">website.com</a></span> </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<span style="font-family:'Open Sans','Helvetica','Arial', sans-serif;color:#acacac;font-size: 10px;">This communication (including any attachments) is intended only for the recipient(s) identified in the message, and may contain information that is business proprietary/confidential, privileged, or otherwise protected by law. If you are not the intended recipient, please disregard this communication and notify the sender. Any disclosure, copying, or distribution of this message, or the taking of any action based on it, without the express permission of the originator, is strictly prohibited.</span>

当我在运行 iOS 13.5.1 的 iPhone XS Max 上向自己发送测试电子邮件时，它运行良好并显示如下：

但是，如果我水平旋转手机，它会这样做：

然后当我把它转回纵向模式时，它会这样做：

我很确定这是 iOS 邮件应用程序的错误，而不是我的代码，但是我希望我的签名在任何任命时都能很好地显示。为什么会出现这种情况？我怎样才能解决这个问题？我尝试添加一些中断 (<br>) 和填充，但没有运气。

Answer 1

很有可能您也需要将 span 元素放在表格中。或者，更简单的选择是使用段落标签而不是跨度（换句话说，使其成为块元素，而不是内联）。

即：

<p style="font-family:'Open Sans','Helvetica','Arial', sans-serif;color:#acacac;font-size: 10px;">This communication (including any attachments) is intended only for the recipient(s) identified in the message, and may contain information that is business proprietary/confidential, privileged, or otherwise protected by law. If you are not the intended recipient, please disregard this communication and notify the sender. Any disclosure, copying, or distribution of this message, or the taking of any action based on it, without the express permission of the originator, is strictly prohibited.</p>