桌单元格中的图片不对齐相邻单元格

Question

我使用切片工具从Photoshop导出后，将PDF传单转换为HTML。将它导入Dreamweaver时，我只是调整了一些细节。结构没有改变。但是，我遇到了图像问题。我无法弄清楚是什么阻止了一个单元格中的图片与相邻的单元格对齐。

http://jsfiddle.net/hbM9P/

有问题的电池如下：

<td> 
<img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_06.jpg" width="302" alt="" style="display:block;"> 
</td> 

顺便说一句，我使用的是直列CSS的原因是因为我送以此为HTML电子邮件消息和there are issues when dealing with this。

Answer 1

添加vertical-align:top到该行：

<tr style="vertical-align:top"> 
    ... 
    <td> 
     <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_06.jpg" width="302" alt="" style="display:block;"> 
    </td> 
</tr> 

jsFiddle example

Answer 2

其实...有两个问题。

上述vertical-align:top [谢谢j08691]

但同时，图像元素是缺少style="display:block;

http://jsfiddle.net/hbM9P/3/

此代码：

<td rowspan="2"> 
     <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_05.jpg" width="24" height="573" alt=""></td> 

应该是：

<td rowspan="2"> 
     <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_05.jpg" width="24" height="573" alt="" style="display:block;></td> 

Answer 3

对于更好的跨客户端html电子邮件支持，您应该在其他答案中建议的实际使用的是<td>中的html valign="top"，而不是CSS vertical-align。

vertical-align is unsupported在Outlook 07，'10和'13