0

我正在开发一个时事通讯模板，并且我有一个非常基本的多单元页脚，可以在 IE/FF 和 Outlook 中完美呈现。但是当我从 iPhone 或 iPad 阅读电子邮件时，页脚菜单中的链接显示在两行中。有人可以帮我理解为什么会发生这种情况以及我如何在 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

您的版权部分转到下一行的原因是因为您浮动（准确地说是对齐）两个相邻的表。您的主要页脚是 420，您的版权信息是 180，尽管它们位于 600 像素宽的单元格中，但它们不适合，至少在 iPhone/iPad 上是不合适的。

我的第一个猜测是因为你没有在表格单元格上声明确切的宽度（责任、免责声明等......），所以它把你的 480px 表格推得更宽了。

但是，如果您总是希望它们位于同一行，则拥有一张桌子要比使用 align="left" 与并排的桌子调情要容易得多。

从版权表中取出 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 回答