图像在 Outlook 2007/2010 中被截断 [英] Images getting cut off in Outlook 2007/2010

问题描述

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

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

我的印象是，由于 是一个内联元素，它应该包含在块级元素中.这就是我将 包裹在

中的原因.但这导致了一个问题，即文本悬垂导致我的 <div> 太高.所以我将 line-height 设置为 0 作为解决方法.

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

我将来会在我的 <img> 标签上使用 display: 块.

解决方案

根据您使用的电子邮件客户端，得到不同的处理.电子邮件客户端的 IE 是 AOL(但是，谁不再使用它了).我认为chipcullen是对的，你有点想多了.为什么要添加不必要的代码.试一试(TD 内没有线路中断):

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

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

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

希望有帮助！

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>

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.

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?

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

解决方案

<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>

Hope that helps!

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