css - "line-height"文本在 Outlook 中未垂直居中

Question

我尝试在 Outlook 2016 的电子邮件中使用行高，但是，它没有按预期工作。

邮件正文如下:

<div style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;">paragraph text1</div>
<div style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;">paragraph text2</div>
<div style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;">paragraph text3</div>
<div style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;">paragraph text4</div>
<div style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;">paragraph text5</div>

这是它在普通网络浏览器中的行为方式:

这是 Outlook:

Answer 1

有时电子邮件客户端会从 div 中去除内联样式，即使(CSS 终极指南 https://www.campaignmonitor.com/css/ )标记为 line-height受 Outlook 2007/10/13 支持。

为电子邮件编写 HTML 的旧方法是使用表格。
这也是最安全的方式，并且表格上的内联样式和属性不会被电子邮件客户端剥离，这使表格成为您的最佳选择。
关于为什么电子邮件 HTML 仍然最好使用 table 编写，这里的社区讨论有一个很好的答案。而不是 div . https://litmus.com/community/discussions/1443-why-is-it-still-recommended-to-use-tables-for-email-structure

引用 Rémi Parmentier 2 年前的回答

The main reason tables are still used nowadays is to support Outlook 2007/2010/2013. Those versions use Microsoft Word engine to render HTML, and it's quite a mess. It has a limited support for CSS (no float or position for example), and some CSS properties are only supported on some specific HTML elements. For example, padding is supported on a <td>, but not on a <div>. And even when you could theorically use padding on more semantical elements (like <h1> tags), or use margin on <div> elements instead, Word's rendering engine is still massively bugged and can have unpredictable behavior with such HTML and CSS code. Thus, developers find it easier to just use <table> instead. You can read more about Outlook HTML and CSS support here.

But here's the thing : if you don't feel like you need to support Outlook 2007/2010/2013, then you can absolutely ditch tables and use better code instead. And even if you need to support it, simple one-column layouts can be done without tables. The reason your template works in Outlook 2011 is that this version (for Mac only) uses WebKit rendering engine (just like in Safari or Apple Mail)

无论如何，试试这个。

<table>
  <tbody>
    <tr>
      <td style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;"> paragraph text1 </td>
    </tr>
    <tr>
      <td style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;"> paragraph text2 </td>
    </tr>
    <tr>
      <td style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;"> paragraph text3 </td>
    </tr>
    <tr>
      <td style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;"> paragraph text4 </td>
    </tr>
    <tr>
      <td style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;"> paragraph text5 </td>
    </tr>
  </tbody>
</table>