如何使表格单元格响应iOS邮件应用程序

Question

我目前正在开发一个电子邮件，在不同的地方有2列布局。我最初使用

要修复Outlook问题，我只需更改

还有人在iOS邮件应用程序中遇到过这个问题吗？我不明白为什么我的内联样式和媒体查询被忽略了，仅仅因为元素现在是表格单元格而不是div。

超文本标记语言（抱歉，尽力清理）：

<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

匿名用户

你有决斗<代码>！重要的标签；您不需要包含！内联css中的重要。改变这个：

<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中删除后，媒体查询代码可以覆盖300px的宽度，并将其更改为100%或任何您想要的宽度。