Android中心对齐图片

Question

我有非常简单的HTML。这是一个电子邮件标题。我的问题是，它在iOS上完美显示，但是当我运行实际的电子邮件测试时，Android中心会对齐徽标和按钮。浏览器显示得很好。它只是电子邮件客户端的变化。徽标应该左对齐，橙色按钮右对齐。

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0;border-collapse:collapse!important">
  <tr>
    <td valign="top" align="left" width="30%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0">
      <a href="%%text01%%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:Helvetica,Arial,sans-serif;color:#b5b5b5;font-weight:normal;text-decoration:none">
        <img class="logo" src="http://image.info.olx.co.za/lib/fe9413727563037e74/m/1/121115_logo.png" alt="OLX" style="-ms-interpolation-mode:bicubic;border:0;height:auto;line-height:100%;outline:0;text-decoration:none;">
      </a>
    </td>
    <td class="cta-sell-orange" align="right" valign="center" width="70%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0">
      <a align="right" style="margin-right: 7px;font-size: 13px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: Helvetica, Arial, sans-serif;color: #ffffff;font-weight: normal;text-decoration: none;background-color: #ff7800 !important;-moz-border-radius: 3px !important;-webkit-border-radius: 3px !important;border-radius: 2px !important;border: 1px solid #ff6000 !important;display: inline-block !important;cursor: pointer !important;padding: 10px 25px !important; margin: 3px !important; font-weight: bold !important;"
      href="%%text02%%">Sell your item</a>
    </td>
  </tr>
</table>

https://jsfiddle.net/ericpayi/ksgvf7st/

Answer 1

如果您在PX中定义两个TD而​​不是百分比，则会显示它正常工作。我知道Android 5.1中的表宽度为100％存在问题，但之前并未发现这是一个问题。

请参阅下面的像素定义代码的屏幕截图：

请参阅下面的更新代码：

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0;border-collapse:collapse!important">
<tr>
<td valign="top" align="left" width="170" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0">
<a href="%%text01%%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:Helvetica,Arial,sans-serif;color:#b5b5b5;font-weight:normal;text-decoration:none">
<img class="logo" src="http://image.info.olx.co.za/lib/fe9413727563037e74/m/1/121115_logo.png" alt="OLX" style="-ms-interpolation-mode:bicubic;border:0;height:auto;line-height:100%;outline:0;text-decoration:none;">
</a>
</td>
<td class="cta-sell-orange" align="right" valign="center" width="430" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0">
<a align="right" style="margin-right: 7px;font-size: 13px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: Helvetica, Arial, sans-serif;color: #ffffff;font-weight: normal;text-decoration: none;background-color: #ff7800 !important;-moz-border-radius: 3px !important;-webkit-border-radius: 3px !important;border-radius: 2px !important;border: 1px solid #ff6000 !important;display: inline-block !important;cursor: pointer !important;padding: 10px 25px !important; margin: 3px !important; font-weight: bold !important;" href="%%text02%%">Sell your item</a>
</td>
</tr>
</table>