0

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

我在 Acid 上使用电子邮件来预览电子邮件。在使用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属性来强制高度，但到目前为止没有运气。

4

3 回答 3

1

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

于 2018-04-30T06:05:16.923 回答
0

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

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

于 2015-03-16T14:15:34.777 回答
0

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

于 2015-06-23T17:51:02.683 回答