html - HTML 表格中的文本未在 iPhone 邮件中呈现/减少

Question

在 iPhone 上的 Apple Mail 中查看时，表格内的文本 block 无法正确呈现。但是，文本在桌面上的 Outlook 2003、2007、2010 和 Apple Mail 上显示正常。在 iPhone 上，它不会随着电子邮件的其余部分减少。正文电子邮件似乎呈现正确，但不是页脚文本(两者都在表格内)。文本显示不正确的唯一其他地方是顶部的日期行。

这是影响页脚的样式表部分:

.FooterText {
font-size: 7pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 11pt;
}
a.FooterLink {
    font-size: 7ptem;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    color: #FFFFFF
}

.RegisteredFooterText {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 6pt;
    font-style: normal;
    text-align: center;
}
</style>
</head>

这是页脚区域的代码:

<table width="650" border="0" cellspacing=0 cellpadding=0 bgcolor="#0064C8">
  <tr>
    <td width="2%">&nbsp;</td>
    <td width="19%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Unsubscribe</strong></p>
      <p class="FooterText">You are receiving this email because you are a member of NALP.</p>
      <p class="FooterText">To unsubscribe from this [email type] related emails, please
        <unsubscribe style="text-decoration:none; color:#FFFFFF;">click here</unsubscribe>
        .</p></td>
    <td width="26%" style="padding-top: 15px; padding-left: 12px; padding-right: 10px; padding-bottom:25px" class ="FooterText"><p class ="FooterText"><strong>Discover NALP</strong></p>
      <p><a href="http://www.nalp.org" class="FooterLink">About NALP</a><br />
        <a href="http://www.nalp.org/events" class="FooterLink">Conferences &amp; Events</a><br />
        <a href="https://netforum.avectra.com/eWeb/StartPage.aspx?Site=NALP" class="FooterLink">Member Portal</a><br />
        <a href="http://nalp.mymemberfuse.com" class="FooterLink">NALPconnect</a><br />
        <a href="https://netforum.avectra.com/eweb/shopping/shopping.aspx?site=nalp&amp;webcode=shopping&amp;cart=0&amp;shopsearchCat=Merchandise&amp;sort=4&amp;" class="FooterLink" >Bookstore</a><br />
      <a href="http://jobs.nalp.org/" class="FooterLink">Job Center</a></p></td>
    <td width="28%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class="FooterText"><strong>About NALP</strong></p>
      <p class="FooterText">NALP believes in fairness, facts, and the power of a diverse community. We work every day to be the best career services, recruitment, and professional development organization in the world because we want the lawyers and law students we serve to have an ethical recruiting system, employment data they can trust, and expert advisers to guide and support them in every stage of their careers.</p></td>
    <td width="24%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Contact Us</strong></p>
      <p class="FooterText">NALP<br />
        1220 19th Street, NW<br />
        Suite 401<br />
      Washington, DC 20036</p></td>
  </tr>
</table>

我尝试了一些媒体查询来减小字体大小，但似乎也不起作用:

@media only screen and (max-device-width: 480px) {
.FooterText {
    font-size: 5pt;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFFFFF;
    vertical-align:top;
    line-height: 8pt;
}
a.FooterLink {
    font-size: 5pt;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    color: #FFFFFF
}
.RegisteredFooterText {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 4pt;
    font-style: normal;
    text-align: center;
}
    }

Answer 1

首先使用以像素为单位的文本大小，并将其添加到您的样式中:-webkit-text-size-adjust:none;

即:

.FooterText {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 8pt;
-webkit-text-size-adjust:none;

}