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>

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

1 个答案: