Outlook 电子邮件中未呈现进度条颜色答案

【问题标题】：Progress bar colors not rendered in Outlook emailOutlook 电子邮件中未呈现进度条颜色
【发布时间】：2021-06-30 15:01:28
【问题描述】：

我需要在通过 Perl 脚本发送的电子邮件中获取进度条。

下面是我用过的 JS fiddle 链接。尽管在浏览器中可见，但它不会在电子邮件中显示进度条。

http://jsfiddle.net/dw34m2j7/1/

这里是 Perl 代码 sn-p。

use MIME::Lite;
use strict;

my $mail_body = "";
$mail_body = "
<html lang='en'>
<head>
  <title>Bootstrap Example</title>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
</head>
<body>

<div class='container'>
  <h2>Progress Bar With Label</h2>
  <div class='progress'>
    <div class='progress-bar' style='width:80%'>80%</div>
  </div>
</div>

</body>
</html> ";
 my $msg = MIME::Lite->new(
           From => "me\@do-not-reply",
           To => "abc\@outlook.com",
            Subject => "TEST EMAIL",                                                                                                        
            Type    => 'multipart/mixed'
                                                                                                                    );
                                    $msg->attach(
                                            Type => 'text/html',
                                            Encoding => 'quoted-printable',
                                            Data => $mail_body,
                                            );
                                    $msg->send;

我什至使用了一个逻辑来创建进度条，没有 JS 和 Bootstrap，只使用 HTML 和 CSS。

请在下面的链接中找到代码。

http://jsfiddle.net/dw34m2j7/

让我知道一种通过 Perl 的电子邮件发送此进度条的方法。

【问题讨论】：

Outlook 和大多数其他邮件客户端不会包含外部样式表或图像（至少在未经用户批准的情况下不会）。尝试嵌入样式表。

标签： html css html-email

【解决方案1】：

由于某些原因，Bootstrap 不能很好地处理电子邮件。请参阅Has anyone gotten HTML emails working with Twitter Bootstrap? 和Can I use bootstrap for designing HTML Email Templates。

您在第二个示例中说您没有使用 Bootstrap 或 jQUery - 但您没有内联样式。您还使用 div 和定位，这不是很好的起点。试试桌子。在电子邮件中查找有效和无效的方法：https://www.caniemail.com/

您似乎是 HTML 电子邮件的新手——您需要重新考虑。浏览此资源页面以了解初学者：https://thebetter.email/resources/

【讨论】：

【解决方案2】：

这是对我有用的解决方案

my $mail_body = "
<html>
<body>
<table cellpadding=\"0\" cellspacing=\"0\" width=\"250\" >
<tr>
  <td col width = 90 bgcolor=\"#f83f83\" style=\" background-color:#f83f83; float:left; height:15px; text-align:center;\">90</td>
  <td col width = 10 bgcolor=\"#cccccc\" style=\" background-color:#cccccc; float:left; height:15px;\"></td>
</tr>
</table>
<br>
<table cellpadding=\"0\" cellspacing=\"0\" width=\"250\"  >
<tr>
  <td col width = \"70\" bgcolor=\"#f83f83\" style=\" background-color:#f83f83; float:left; height:15px;\"></td>
  <td col width = \"30\" bgcolor=\"#cccccc\" style=\" background-color:#cccccc; float:left; height:15px;\"></td>
</tr>
</table>
<br>
<table cellpadding=\"0\" cellspacing=\"0\" width=\"250\"  >
<tr>
  <td col width = \"5\" bgcolor=\"#f83f83\" style=\" background-color:#f83f83; float:left; height:15px;\"></td>
  <td col width = \"95\" bgcolor=\"#cccccc\" style=\" background-color:#cccccc; float:left; height:15px;\"></td>
</tr>
</table>
</body>
</html>";

【讨论】：