Question

我目前正在开发一个在不同地方有2列布局的电子邮件。我最初为每列使用了<div>个标签，这在每个电子邮件客户端都很有用，除了旧版本的Outlook（无论屏幕大小如何，列都会以100％宽度呈现）。

要修复Outlook问题，我只需将<div>标记更改为<td>即可。现在，我在iOS邮件应用程序（10.1.1）中遇到问题，<td>拒绝在较小的屏幕上使用全宽度。在下面的代码中，您可以看到两个<td class="col-6-article">元素的固定宽度都是300px，但是当我在iOS邮件应用程序中打开电子邮件时，这两个元素都是50％的屏幕宽度。这是截图：http://imgur.com/a/0XsGz

有没有其他人使用iOS邮件应用程序遇到此问题？我无法弄清楚为什么我的内联样式和媒体查询被忽略，因为元素现在是table-cells而不是div。

HTML（抱歉，我尽力清理它）：

<table cellspacing="0" cellpadding="0" width="100%" align="center">
  <tbody>
    <tr style="vertical-align: top;">
      <td width="100%">
        <table class="container" style="max-width: 650px; margin: 0 auto;background:#fff;" cellspacing="0" cellpadding="0" width="100%" align="center">
          <tr>
            <td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;">
              <img class="center fullwidth" style="display: block; width: 100%!important; max-width: 325px;" src="http://billykroger.com/img/1mLusPPr.jpg" width="325" />
              <h3>Pledges to Ipsum fall short</h3>
              <p>Abby Bruell | Jun 2015</p>
              <p>Despite good intentions, donors to the London conference have failed to follow through will the pledges they made to aid Syrian refugees. Now, millions of women and children face the consequences of their inaction.</p>
              <table>
                <tr>
                  <td style="text-align: center; height: 33px; width: 160px; background: #007c76;">
                    <table style="margin: 0 auto;">
                      <tr height="5" style="height:5px"></tr>
                      <tr style="line-height:normal">
                        <td><a style="padding: 0; color: #ffffff" href="#">
                          <span style="color: #FFFFFF; font-size: 14px">READ MORE</span>
                          </a>
                        </td>
                        <td>
                          <a style="padding: 0; color: #ffffff;" href="#">
                          <img width="20" height="20" style="height: 20px !important; width: 20px !important;" src="http://cww.convio.net/images/content/pagebuilder/arrow.png" />
                          </a>
                        </td>
                      </tr>
                      <tr height="5" style="height:5px"></tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
            <td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;">
              <img class="center fullwidth" style="display: block; width: 100%!important; max-width: 325px;" src="http://billykroger.com/img/1mLusPPr.jpg" width="325" />
              <h3>Pledges to Ipsum fall short</h3>
              <p>Abby Bruell | Jun 2015</p>
              <p>Despite good intentions, donors to the London conference have failed to follow through will the pledges they made to aid Syrian refugees. Now, millions of women and children face the consequences of their inaction.</p>
              <table>
                <tr>
                  <td style="text-align: center; height: 33px; width: 160px; background: #007c76;">
                    <table style="margin: 0 auto;">
                      <tr height="5" style="height:5px"></tr>
                      <tr style="line-height:normal">
                        <td><a style="padding: 0; color: #ffffff" href="#">
                          <span style="color: #FFFFFF; font-size: 14px">READ MORE</span>
                          </a>
                        </td>
                        <td>
                          <a style="padding: 0; color: #ffffff;" href="#">
                          <img width="20" height="20" style="height: 20px !important; width: 20px !important;" src="http://cww.convio.net/images/content/pagebuilder/arrow.png" />
                          </a>
                        </td>
                      </tr>
                      <tr height="5" style="height:5px"></tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
</table>

CSS媒体查询：

@media screen and (max-width: 650px) and (max-device-width: 650px) {
     .col-6-article {
         width: 100% !important;
         display: block !important;
     }
}

Answer 1

您已经决定!important个标签;您不需要在内联css中加入!important。更改此信息：

<td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;">

对此：

<td class="col-6-article" style="display:inline-block; width:300px padding: 0 0 25px 15px;">

从正文的内联css中删除!important后，媒体查询代码可以覆盖300px宽度并将其更改为100％或任何您想要的内容。

如何在iOS Mail App中使表格单元格响应

1 个答案: