【发布时间】:2012-02-17 08:28:03
【问题描述】:
Outlook 2010/Outlook 2007 在我的 HTML 电子邮件中似乎没有遵守行高。 (它在 Outlook 00 和 Outlook 03 中完美运行)
我一直在做一些广泛的谷歌搜索 - 我发现 HTML CSS 支持图表表明 Outlook 2010/2007 应该了解行高。
我尝试将 line-height 放在 block 父元素和子段落元素上,以及放在 head 中 style 标记中的 ID 上,以及上面的每个组合上。
我还确保我明确声明 line-height 是一个明显大于文本大小的像素值(但我也尝试了 % 和 em)。尝试将 !important 放入声明中 - 甚至尝试 valign 以及我可以在网上找到的所有其他提示......我一直在使用 line-height 来举例确定按钮 padding-top 和 padding-bottom,因为 HTML 电子邮件对 padding/margin 的支持是如此错误。
我非常感谢您对此的任何帮助。现在真的是头疼!
实际的电子邮件很大,因为它是一份复杂的时事通讯,但这里是头部样式的 sn-p,以及行高不起作用的表格部分 - 我希望这就足够了!:
<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 -->
【问题讨论】:
-
以前的 Office 版本使用 HTML 小部件来显示和编辑 HTML 消息。 Outlook 2007 及更高版本使用 Word 小部件,这对于 HTML 来说非常糟糕。