MS Outlook 2010 headers 混合

Question

我绝对不是 CSS 也不是 HTML 专家，但我认为我的代码是正确的。当我在 Internet Explorer 中运行它工作正常并在 headers 之间显示一些白色 space，这是应该的。但是当我将它发送到 MS Outlook 2010 时，headers 正在混合。而且我似乎无法找到一种干净的方式来解决这个问题...

MS Outlook 2010（不正常）：

Internet Explorer（正常）：

HTML/CSS-Code:

<!DOCTYPE html>
<html><head><style type="text/css">
body {
    font-family:verdana;
    background-color:white;
}
h1 {
    background-color:black;
    color:white;
    margin-bottom:0px;
    text-indent:10px;
}
h2 {
    background-color:lightGrey;
    margin-bottom:10px;
    text-indent:10px;
}
p {
    font-size: 14px;
    margin-left:10px;
}
</style></head><body>
<h1>My Big Title</h1>
<h2>My Smaller title:</h2>
<p>Hello world :)</p>
</body></html>

感谢您帮助解决这个棘手的小问题。

将 h1 更改为 margin-bottom:10px; 也无法解决问题：

Answer 1

Internet Explorer 可能会将默认浏览器边距应用到 header 元素，这解释了为什么顶部和底部文本被推到彼此下方。如果您的第一行文字是大标题，请尝试更新

h1 { background-color:black; color:white; margin-bottom:0px; text-indent:10px; }

和

h1 { background-color:black; color:white; margin-bottom:10px; text-indent:10px; }

这将在您的第一个 h1 文本的底部应用 10 像素的边距。您可以根据需要更改值。

Answer 2

已通过添加 page-break-before: always; 修复它，如在 this post 中找到的那样。

伙计，很高兴我解决了这个问题！困扰我很久了。

修复：

h1 {
    background-color:black;
    color:white;
    margin-bottom:10px;
    text-indent:10px;
    page-break-before: always;
}
h2 {
    background-color:lightGrey;
    margin-bottom:10px;
    text-indent:10px;
    page-break-before: always;
}

MS Outlook 2010 headers 混合

MS Outlook 2010 headers mixing

html

css

outlook

header