Центр 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

Оказывается, если вы определяете два TDs в РХ вместо проценту работает отлично. Я знаю, что в 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>