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

【问题标题】：Image height cutoff in Outlook 2007/2010 (well below max height)Outlook 2007/2010 中的图像高度截止（远低于最大高度）
【发布时间】：2015-03-14 00:09:14
【问题描述】：

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

我在 Acid 上使用电子邮件来预览电子邮件。在使用 premailer 发送电子邮件之前，内联 CSS。

第二张图片显示正常。

这是相关代码和截图。

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 属性来强制高度，但到目前为止没有运气。

【问题讨论】：

你能提供截图吗？我没有看到他们...
@CalvT - 我用屏幕截图和附加代码更新了问题。

标签： outlook html-email zurb-ink

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我在td 元素中添加了align:left 和valign:top，但我仍然看到了这个问题。一条线索，粉红色的图像（被截断的图像）的高度为 19px，即封闭的td 的line-height。   标签是否会导致顶部图像在 line-height 处被截断？
我认为你在正确的轨道上。你的图片设置为display:block，所以不需要 
如果没有 ，图像会内联显示。也许我需要调整列宽以强制图像在没有  的情况下换行，或者使图像宽度适合列宽。
解决方案原来是删除float:left、删除 和使图像宽度填充表格列的组合。

【解决方案3】：

我遇到了同样的问题，仅在 Outlook 中截断了高度。我通过删除图像上的自定义类解决了这个问题。

【讨论】：