使用 Zurb 库的电子邮件模板在 Firefox 中没有响应

Question

<table class="row">
  <tbody>
     <tr>
        <td class="small-5 large-7 column">
          <p class="heading-text">ITEM</p>
        </td>
        <td class="small-3 large-2 columns space" align="center">
          <p class="heading-text text-center">QTY</p>
        </td>
        <td class="small-4 large-3 columns">
          <p class="heading-text text-right">TOTAL</p>
        </td>
      </tr>
    
      <tr>
        <td class="small-5 large-7 columns space">
          <h6>1613 | <span class="memo-text">Out</span></h6>
          <p class="desc">The framework includes two typographic scalesone uses a narrow range of sizes.</p>
        </td>
        <td class="small-2 large-2 columns space" align="center">
          <h6 class="text-center">15.00</h6>
        </td>
        <td class="small-5 large-3 columns space" align="center">
          <h6 class="text-right">$394,567.00</h6>
          <p class="desc text-right">10.00%</p>
          <p class="desc text-right">$39,800.00</p>
        </td>
      </tr>
  </tbody>
</table>

这两行在 mozilla firefox 的移动视图中无法正确显示。最后一列<p class="heading-text text-right">TOTAL</p> 移动下一行。

任何帮助将不胜感激。

Answer 1

这个与 Firefox 相关的 Foundation-emails 问题仍然存在，但可以通过以下方式修复：

@media only screen and (max-width: 596px) {
  td.small-6, th.small-6 {
    display: table-cell !important;
  }
}

感谢@ryanjavens

要使其适用于您的结构，请尝试以下方法并告诉我您是否可以解决它：

@media only screen and (max-width: 596px) {
    td.small-6, th.small-6,
    td.small-5, th.small-5,
    td.small-4, th.small-4,
    td.small-3, th.small-3,
    td.small-2, th.small-2,
    td.small-1, th.small-1{
        display: table-cell !important;
    }
}

.space {
    padding-bottom : 0px !important;
    margin-bottom :  0px !important;
    padding-left :   4px !important;
    padding-right :  4px !important;
}

<table align="center" class="container float-center">
  <tbody>
    <tr>
      <td>

        <table class="row">
          <tbody>
            <tr>
              <td class="small-5 large-7 column">
                <p class="heading-text">ITEM</p>
              </td>
              <td class="small-3 large-2 columns space" align="center">
                <p class="heading-text text-center">QTY</p>
              </td>
              <td class="small-4 large-3 columns">
                <p class="heading-text text-right">TOTAL</p>
              </td>
            </tr>

            <tr>
              <td class="small-5 large-7 columns space">
                <h6>1613 | <span class="memo-text">Out</span></h6>
                <p class="desc">The framework includes two typographic scalesone uses a narrow range of sizes.</p>
              </td>
              <td class="small-2 large-2 columns space" align="center">
                <h6 class="text-center">15.00</h6>
              </td>
              <td class="small-5 large-3 columns space" align="center">
                <h6 class="text-right">$394,567.00</h6>
                <p class="desc text-right">10.00%</p>
                <p class="desc text-right">$39,800.00</p>
              </td>
            </tr>
          </tbody>
        </table>

      </td>
    </tr>
  </tbody>
</table>

附：如果您必须使用其他尺寸，请将它们添加到规则中，例如添加small-7：

@media only screen and (max-width: 596px) {
    td.small-7, th.small-7,
    td.small-6, th.small-6,
    td.small-5, th.small-5,
    td.small-4, th.small-4,
    td.small-3, th.small-3,
    td.small-2, th.small-2,
    td.small-1, th.small-1 {
        display: table-cell !important;
    }
}

JSFiddle