0

私はニュースレター テンプレートを開発しています。IE/FF および Outlook で完全にレンダリングされる非常に基本的なマルチセル フッターがあります。しかし、iPhone や iPad からメールを読むと、フッター メニューのリンクが 2 行で表示されます。なぜこれが起こるのか、そしてiPhone / iPadでも望ましい結果を得るにはどうすればよいのかを理解するのを手伝ってくれる人はとても親切ですか?

これが私のコードです（フッターを含む部分のみ）：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td align="center" bgcolor="#FFFFFF" style="color: #6f6f6f; border: #6f6f6f;">
<!-- block preamble starts -->
<table class="l-preamble" border="0" cellpadding="0" cellspacing="0" width="600" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="has-border-bottom-1" height="16" width="600" style="color: #6f6f6f; border-bottom: 1px solid #6f6f6f;"></td>
</tr>
<!-- element preamble-info ends -->
<!-- element preamble-year starts -->
<tr>
<td width='420'>
<table class="small-font" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; font-size: 12px; color: #b2b2b2 !important; text-transform: uppercase; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="fabsize" class='is-last' style="letter-spacing: 0; padding-right: 12px; ">
<font style=' color: #b2b2b2;'>
<a href="http://www.test/fab" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">
Responsibles
</a>
</font>
</td>
<td class="fabsize" class='is-last' style="letter-spacing: 0; padding-right: 12px; padding-left: 12px; border-left: 1px solid #b2b2b2;">
<font style=' color: #b2b2b2;'>
<a href="http://www.test/fab" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">
Disclaimer
</a>
</font>
</td>
<td class="fabsize" class='is-last' style="letter-spacing: 0; padding-right: 12px; padding-left: 12px; border-left: 1px solid #b2b2b2;">
<font style=' color: #b2b2b2;'>
<a href="http://www.test/fab" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">
Feedback
</a>
</font>
</td>
<td class="fabsize" class='is-last' style="letter-spacing: 0; padding-right: 12px; padding-left: 12px; border-left: 1px solid #b2b2b2;">
<font style=' color: #b2b2b2;'>
<a href="http://www.test/fab" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">
RSS feeds
</a>
</font>
</td>
</tr>
</tbody>
</table>
</td>
<td width="180" align="right" style="color: #6f6f6f; border: #6f6f6f;">
<table class="small-font" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; font-size: 12px; color: #b2b2b2 !important; text-transform: uppercase; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="is-first" style="color: #6f6f6f;letter-spacing: 0; padding: 0px; border: 0px">
<span style="color: #b2b2b2; line-height: inherit; margin: 0px; padding: 0px; border: 0px;">
&copy; 2013&nbsp;&nbsp;&nbsp;&nbsp;LLLLLVSKI
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
4

1 に答える 1

0

著作権部分が次の行に移動する理由は、2 つのテーブルが隣り合ってフローティング (正確には整列) しているためです。あなたのメイン フッターは 420 で、著作権情報は 180 です。これらは 600px 幅のセルに格納されていますが、少なくとも iPhone/iPad では収まりません。

私の最初の推測は、テーブル セル (責任、免責事項など) で正確な幅を宣言していないため、480 ピクセルのテーブルをより広くプッシュしているためです。

ただし、それらを常に同じ行にしたい場合は、align="left" を使用して横に並べて表示するよりも、1 つのテーブルを使用する方がはるかに簡単です。

著作権テーブルから td セルを取得し、それを他のセルに入れます。<tbody>また、メールにタグは必要ないので、タグも削除してください。

次のようになります。

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <font style=' color: #b2b2b2;'>
        <a href="http://www.test/fab" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">Responsibles </a>
      </font>
    </td>
    <td>
      <font style=' color: #b2b2b2;'>
        <a href="http://www.test/fab" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">Disclaimer </a>
      </font>
    </td>
    <td>
      <font style=' color: #b2b2b2;'>
        <a href="http://www.test/fab" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">Feedback </a>
      </font>
    </td>
    <td>
      <font style=' color: #b2b2b2;'>
        <a href="http://www.test/fab" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">RSS feeds </a>
      </font>
    </td>
    <td>
    </td>
    <td>
      <font style=' color: #b2b2b2;'>
        <font style="color: #b2b2b2; line-height: inherit; margin: 0px; padding: 0px; border: 0px;">
          &copy; 2013&nbsp;&nbsp;&nbsp;&nbsp;LLLLLVSKI
        </font>
      </font>
    </td>
  </tr>
</table>
于 2013-06-17T19:03:08.820 に答える