Question

在iPhone上的Apple Mail中查看时，我的表格内的文本块无法正确呈现。但是，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;

}

HTML表格中的文本无法在iPhone Mail中呈现/缩小

1 个答案: