CSS 电子邮件样式不适用于 Outlook

问题描述 投票:0回答:1

我有一个非常简单的内联 css 样式,除了 Outlook(浏览器版本)之外,它在任何地方都可以正常工作。

我找到了这个兼容性网站,根据它,一切应该工作正常。

代码:

<footer style="font-size: 9px;text-align: center;">
  <p>
   /.../
  </p>
</footer>

有没有办法实现这个结果也可以使用 Outlook?
我找不到,但有人知道是否有用于电子邮件样式的

preview

css office365 html-email outlook-web-app
1个回答
0
投票

使用表格并在

table cell(td)
中内联编写样式,如下所示,它将在 Outlook 中工作。

许多标签和 CSS 规则不适用于电子邮件,但在浏览器中签入时适用于网页和电子邮件。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Email</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body style="margin: 0; padding: 0;">

  <!-- using footer -->
  <footer style="font-size: 9px;text-align: center;">
    <p>
     This is inside the footer
    </p>
  </footer>
  
  <!-- using table -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td>
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
          <tr>
            <td style="font-size: 9px;text-align: center;">
              This is inside the table
            </td>
          </tr>          
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.