行高在 Outlook 2010 中不适用于 HTML 电子邮件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8980956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Line-height not working in Outlook 2010 for HTML Email
提问by Lauren
Outlook 2010/ Outlook 2007 does not appear to be honoring line-height whatsoever in my HTML Email. (It works perfectly in Outlook 00 and Outlook 03)
Outlook 2010/ Outlook 2007 在我的 HTML 电子邮件中似乎不支持行高。（它在 Outlook 00 和 Outlook 03 中完美运行）
I've been doing some extensive googling - and HTML CSS support charts I have found say that Outlook 2010/2007 SHOULD understand line height.
我一直在做一些广泛的谷歌搜索 - 我发现的 HTML CSS 支持图表说 Outlook 2010/2007 应该理解行高。
I've tried putting the line-height on the block parent element, and the child paragraph element, and as on an ID in the style tag in the head, and every combination of the above.
我已经尝试将行高放在块父元素和子段落元素上，以及放在头部样式标签中的 ID 上，以及上述的每个组合上。
I've also ensured I am explicitly declaring line-height as a pixel value that is significantly larger than the text size (but I tried % and em too). Tried putting !important in the declaration - and even tried valign along with every other tip I could find online.... I have been using line-height to e.g. determine button padding-top and padding-bottom, since HTML Email support for padding/margin is so buggy.
我还确保我明确地将 line-height 声明为一个明显大于文本大小的像素值（但我也尝试了 % 和 em ）。尝试将 !important 放在声明中 - 甚至尝试了 valign 以及我可以在网上找到的所有其他提示......我一直在使用 line-height 来确定按钮 padding-top 和 padding-bottom，因为 HTML 电子邮件支持填充/margin 太有问题了。
I would really appreciate any help with this.Really at the head-banging point now!
我真的很感激这方面的任何帮助。现在真的到了令人头疼的时候！
The actual email is huge as it's a complicated newsletter, but here is a snippet of the style in the head, and a table section in which the line-height isn't working - I hope that is enough!:
实际的电子邮件很大，因为它是一份复杂的时事通讯，但这里是头部样式的片段，以及行高不起作用的表格部分 - 我希望这已经足够了！：
<style type="text/css" media="screen">
html {
-webkit-text-size-adjust:none;
-webkit-background-size:100%;
}
body{
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
margin-bottom:0px !important;
margin-top:0px !important;
background-color:#e5e5e5;
}
p{
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
margin-bottom:0px !important;
margin-top:0px !important;
display:block;
}
a:link, a:visited, a:active{
color:#55c2d9;
text-decoration: underline;
}
a:hover{
text-decoration: underline;
}
.body a:link, a:visited, a:active{
color:#55c2d9;
}
img{
border: 0;
display: block;
}
table.main {
background-color: #ffffff;
width:650px;
}
td {
}
#header-top p{
line-height:33px;
}
</style>
<!-- Content -->
<table border="0" cellspacing="0" cellpadding="0" class="body">
<!-- Row 1 -->
<tr valign="top">
<td background="images/bg-texture-top.jpg" style="background-repeat:repeat-y; background-color:#262626;" valign="top" width="650" height="33" bgcolor="#262626">
<table border="0" cellspacing="0" cellpadding="0" id="header-top">
<!-- Row 1.1 -->
<tr valign="top">
<td style="" valign="top" width="16" height="" bgcolor="">
</td>
<td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="490" height="33" bgcolor="">
<p><a href="#">click here to view this email in a browser</a></p>
</td>
<td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="62" height="33" bgcolor="">
<p>find us on:</p>
</td>
<td style="" valign="top" width="16" height="" bgcolor="">
</td>
</tr>
</table>
</td>
</tr>
</table> <!-- Content -->
回答by Wes
I use a combination of inline CSS to control line-height:
我使用内联 CSS 的组合来控制行高：
<p style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:110%;font-size:11pt;">paragraph text</p>
<p style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:110%;font-size:11pt;">paragraph text</p>
The key element is the Microsoft proprietary CSS attribute, mso-line-height-rule: exactly;. The padding just prevents the paragraph tags from creating unnecessary space.
关键元素是 Microsoft 专有的 CSS 属性mso-line-height-rule: exactly;. 填充只是防止段落标签创建不必要的空间。
回答by Radu Damian
Outlook supports line-height specified in percents. For example line-height: 1.1 isn't supported, but line-height: 110% is.
Outlook 支持以百分比指定的行高。例如 line-height: 1.1 不受支持，但 line-height: 110% 是。
回答by Steve H
Late response, but since I recently worked through a similar line-height issue in Outlook, I wanted to share my hacky workaround.
迟到的回应，但由于我最近在 Outlook 中解决了类似的行高问题，我想分享我的 hacky 解决方法。
For whatever reason, if you throw an unordered list into the HTML just before the CLOSING tag of the tag you specified the line-height for, Outlook 2010 respects the line-height.
无论出于何种原因，如果您在指定行高的标记的 CLOSING 标记之前将无序列表放入 HTML，Outlook 2010 会考虑行高。
You can make the unordered list empty and invisble:
您可以使无序列表为空且不可见：
<ul style="list-style-type: none; visibility:hidden;"></ul>
Example:
例子：
<p style="font-size: 12px; line-height: 18px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul style="list-style-type: none; visibility:hidden;"></ul>
</p>
Disclaimer: I haven't tested this exhaustively. It works in my template through one ESP in Outlook 2010, Gmail's current version (July 27, 2012), and the iPhone email app. I don't know if the trick universally fixes the line height issue in other tags. I also acknowledge its a cludgey fix, but it's a cludgey problem; and, as is often the case with Outlook's flagrant disregard for HTML specifications, the fix is often as stupid as the problem. Use this if you want, but test it extensively before sending to actual recipients.
免责声明：我没有对此进行详尽的测试。它通过 Outlook 2010、Gmail 的当前版本（2012 年 7 月 27 日）和 iPhone 电子邮件应用程序中的一个 ESP 在我的模板中工作。我不知道这个技巧是否普遍解决了其他标签中的行高问题。我也承认这是一个笨拙的修复，但这是一个笨拙的问题；并且，正如 Outlook 公然无视 HTML 规范的情况一样，修复通常与问题一样愚蠢。如果您愿意，可以使用它，但在发送给实际收件人之前对其进行广泛测试。
回答by Thomas Fellinger
Outlook uses the word html processor for rendering and editing html. Get used to table layouts and forget about css, and if - use only inline css. you have just a few possibilities: background, font-family, font.size, color.
Outlook 使用 word html 处理器来呈现和编辑 html。习惯表格布局并忘记 css，如果 - 只使用内联 css。你只有几种可能性：背景、字体系列、字体大小、颜色。
a full list of supported css can be found here, a tutorial is here.
But you also have to think about your receivers - if they are on google mail or yohoo mail your css can be stripped out completely
但是你也必须考虑你的接收者——如果他们在 google mail 或 yohoo mail 上，你的 css 可以完全去掉
a good resource for developing email newsletters is campaignmonitor.com/resources, they are also doing a repeatly check of all email services and their HTML/CSS features
开发电子邮件通讯的一个很好的资源是campaignmonitor.com/resources，他们也在反复检查所有的电子邮件服务及其 HTML/CSS 功能
回答by Medhat
For line-height to work in Outlook, after adding "mso-line-height-rule: exactly;" before line-height, make sure to use percentage instead of decimal value (i.e. 150% instead of 1.5)
添加“mso-line-height-rule：exactly;”后，行高在Outlook中工作 在 line-height 之前，确保使用百分比而不是十进制值（即 150% 而不是 1.5）
回答by Raoul Duke
Setting the line-heightusing in-line css on the table cell should be fine but you really don't need those <p>tags in there, that just introduces formatting problems and the references to those <p>tags in the <style>tags in the <head>will be ignored by a number of clients.
line-height在表格单元格上设置using 内联 css 应该没<p>问题，但您确实不需要那里的那些标签，这只会引入格式问题，并且许多客户端将忽略<p>对 中<style>标签中这些标签的引用<head>.
回答by user628176
The best approach for this problem is to use relative positioning and top property, this works like a charm, see example code below
这个问题的最佳方法是使用相对定位和顶部属性，这就像一个魅力，见下面的示例代码
<div style="display: inline-block; ">
<font>Line 1</font><br/>
<font style="position: relative; top: -5px;">Line 2</font><br/>
<font style="position: relative; top: -10px;">Line 3</font><br/>
</div>
