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

我有一个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-编译并内联所有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”

和

行高

属性来强制设置高度，但迄今为止没有成功。

浮动在Outlook中不起作用。您想要的是使用

。您还应该使用

td

的

valign

和

height

属性

---

宽度位也可能导致此问题，您应该通过

width

属性设置图像的宽度，然后设置样式

max width:100%

内联，以实现您想要的效果，并使其跨客户端运行。

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

尝试设置

mso行高规则：至少在图像所在的TD上设置
。我发现MSO电子邮件客户端存在问题，除非此选项设置正确，否则会将图像裁剪到行高。
您能提供截图吗？我没有看到他们…@CalvT-我用截图和附加代码更新了问题。我在
td
元素中添加了
align:left
和
valign:top
，但仍然看到了问题。一条线索是，粉红色图像（被截断的图像）的高度为19px，这是包围的
td
的
行高度。

标签是否会导致顶部图像在
行高度处被截断？
？我认为您的思路是正确的。您的图像被设置为
display:block
，因此如果图像中没有

，则无需使用该

。也许我需要调整列宽以强制图像在不使用

的情况下换行，或者使图像宽度适合列的宽度。解决方案是删除
float:left
，删除

并使图像宽度填充表列。
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;