2

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;
}
    }
4

1 に答える 1