Outlook 2007/2010中的图像被切断

问题描述

图像丢失了最上面一行像素，但仅限于某些情况。示例标记：

Images lost the top row of pixels, but only in certain situations. Example markup:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="top" height="20">
            <div style="line-height:0;"><img src="http://path.to/image.png" alt="" height="20" width="25" /></div>
        </td>
    </tr>
</table>

我的印象是，因为< img> 是一个内联元素，它应该包含在块级元素中。这就是我在< div> 中包装< img> 的原因。但这导致了一个问题，即文本欠悬导致我的< div> 过高。所以我将line-height设置为0作为解决方法。

I was under the impression that since <img> is an inline element, it should be contained inside a block level element. That's why I wrapped my <img> in <div>. But this caused a problem where the text under-hang caused my <div> to be too tall. So I set line-height to 0 as a workaround.

无论 height 还是 valign 我设置< td> 或< img> ，图像的顶部仍然被切断。我发现删除行高就是答案。为什么是这样？

No matter what height or valign I set on the <td> or the <img>, the top of the image is still cut off. I found that removing the line-height was the answer. Why is this?

我将来会在< img> 标签上使用display：block。

I will use display: block on my <img> tags in the future.

推荐答案

< div> 根据您使用的电子邮件客户端的不同对待。电子邮件客户端的IE是AOL（但是，谁再使用它）。我认为chipcullen是对的，你已经过度思考了一下。为什么要输入比必要更多的代码。尝试一下（在TD内没有线路重新开始）：

<div>s get treated differently depending on the email client you're using. The IE of email clients is AOL (but, who uses that anymore). I think chipcullen is right that you're over thinking it a bit. Why put in more code than necessary. Give this a try (no line reaks within the TD):

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="http://path.to/image.png" alt="" height="20" width="25"></td>
    </tr>
</table>

或者，如果你真的必须定义高度：

Or if you really must define heights:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="20" style="height:20px;line-height:20px;"><img src="http://path.to/image.png" alt="" height="20" width="25"></td>
    </tr>
</table>

希望有所帮助！

这篇关于Outlook 2007/2010中的图像被切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！