Outlook 2007/2010 中的图像高度截断（远低于最大高度）

Question

我在 HTML 电子邮件模板中有一张图片，其中的高度被截断了。我正在使用 Zurb Ink 电子邮件框架。该设置是两个应该堆叠在一起的图像。据我所知，图像在 19px 高度处被截断，而实际高度为 47px；

我正在使用 Email on Acid 来预览电子邮件。 CSS 在使用 premailer 发送电子邮件之前被内联。

第二张图片显示正常。

这里是相关代码和截图。

HTML

<table class="row banner">
  <tr>
    <td class="wrapper last">
      <table class="four columns">
        <tr>
          <td>
            <img class="hide-for-small" src="url-to-image.jpg" width="179" height="47" style="width:179px; height:47px; line-height:47px;" />
            <br/>
            <img src="url-to-image.jpg" width="179" height="63" style="width:179px; height:63px; line-height:63px;" />
          </td>
          <td class="expander"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

CSS

img {
  outline:none;
  text-decoration:none;
  -ms-interpolation-mode: bicubic;
  width: auto;
  max-width: 100%;
  float: left;
  clear: both;
  display: block;
}

内联 CSS - 在所有 CSS 被编译和内联之后。

td {
  word-break: break-word; 
  -webkit-hyphens: auto; 
  -moz-hyphens: auto; 
  hyphens: auto; 
  border-collapse: collapse !important; 
  vertical-align: top; 
  text-align: left; 
  color: #222222; 
  font-family: Helvetica, Arial, sans-serif; 
  font-weight: normal; 
  line-height: 19px; 
  font-size: 13px; 
  margin: 0; 
  padding: 0px 0px 10px;
}

img {
  width: 179px; 
  height: 47px; 
  line-height: 47px;
  outline: none; 
  text-decoration: none; 
  -ms-interpolation-mode: bicubic; 
  max-width: 100%; 
  float: left; 
  clear: both; 
  display: block;

截图

展望 2007/2010

普通电子邮件客户端

我尝试添加 height、style="height" 和 line-height 属性来强制高度，但到目前为止没有成功。

Answer 1

浮点数在 Outlook 中不起作用。你想要的是使用 <td align="left|right|center"> 代替。您也应该使用 td 的 valign 和 height 属性。

宽度位也可能导致问题，您应该通过 width 属性设置图像的宽度，然后设置内联样式 max-width:100% 以完成您想要的并保留它跨客户端。

Answer 2

我运行遇到了同样的问题，只是在 Outlook 中高度被截断了。我通过删除图像上的自定义 class(es) 解决了这个问题。

Answer 3

尝试在图像所在的 TD 上设置 mso-line-height-rule: at-least。我发现 MSO 电子邮件客户端存在问题，除非此选项设置正确，否则它会将图像裁剪到行高。

Outlook 2007/2010 中的图像高度截断（远低于最大高度）

Image height cutoff in Outlook 2007/2010 (well below max height)

outlook

html-email

zurb-ink