Some images not correctly sized in mobile Outlook-CodePudding

I'm designing a signature for our company. I've got it fully functional in all tested email clients (iOS/macOS mail, Outlook desktop/on the web) except mobile Outlook (iOS and Android). The problem is that some images are too small, even with width / height explicitly set.

All images are twice the size as the final size set in the styles (to accommodate high DPI screens). From my research, if it were a DPI issue, it wouldn't just be in the mobile Outlook client, but I could be wrong.

Expected result (as it appears in all other tested email clients):

Result in Outlook mobile (iOS and Android) — specifically the social icons under the red image:

The HTML below is for the branding section on the left only and is stripped down to the "essentials". Hopefully should still give an idea of what I'm trying to do, but let me know if I need to include more.

<table style="width: 144px; float: left;">
  <tbody>
    <!--? logo -->
    <tr>
      <td>
        <a href="...">
          <img src="..." width="144" height="60" style="height:60px; width:144px;">
        </a>
      </td>
    </tr>
    <!--? vertical spacer -->
    <tr><td style="height: 1px;"></td></tr>
    <tr>
      <td>
        <table style="width: 144px;">
          <tbody>
            <!--? all the cells in this row add up to the same width above, 144px -->
            <!--? (5 * 28)   (4 * 1) = 144 -->
            <tr>
              <!--? facebook -->
              <td>
                <a href="...">
                  <img src="..." width="28" height="28" style="height:28px; width:28px">
                </a>
              </td>
              <!--? horizontal spacer -->
              <td style="width:1px;" width="1"></td>
              <!--? same code as above, skipped for brevity -->
              <!--? twitter-->
              <!--? horizontal spacer -->
              <!--? linkedin -->
              <!--? horizontal spacer -->
              <!--? youtube -->
              <!--? horizontal spacer -->
              <!--? instagram -->
              <!--? horizontal spacer -->
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Any ideas for how I can make Outlook mobile look like every other email client?

CodePudding user response：

I don't have any definitive documentation or bug tracker that I can point to, but I believe Outlook mobile treats float: properties as an inline-block style — i.e. it attempts to auto-shrink to content, maybe too zealously.

Setting the height explicitly on the table container elements fixed the issue for me:

<table style="width: 144px; height: 89px; float: left;">
  <!--? logo -->
  <!--? vertical spacer -->
  <table style="width: 144px; height: 28px;">
    <!--? social -->
  </table>
</table>