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的这个基础电子邮件问题仍然存在，但可以通过以下方式修复：

@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>

P.S。如果您必须使用其他尺寸，请在规则中添加它们，例如添加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

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

1 个答案: