MS Outlook 2010标题混合

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

的MS Outlook 2010（不正常）：

MS Outlook 2010

的Internet Explorer（OK）：

enter image description here

HTML/CSS-代码：

<!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到不能解决问题之一：

enter image description here

来源

2015-04-03 DarkLite1

通过在this post中找到page-break-before: always;来修复它。

男人我很高兴我解决了这个问题！现在已经困扰我很久了。

修复：

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

来源

2015-04-03 11:26:13 DarkLite1

Internet Explorer的可能适用的默认浏览器利润率这就解释了为什么在顶部和底部的文字都在互相推头元素。如果您的文本的第一行是大标题，尝试更新

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像素的保证金。您可以根据需要更改价值。

来源

2015-04-03 11:13:03

不幸的是，它并没有解决它在Outlook 2010中我已经更新了截图的OP。 – DarkLite1 2015-04-03 11:19:10

MS Outlook 2010标题混合

回答

相关问题