在具有100%功能和响应能力的自动电子邮件中,我有一个简单的HTML表格,该表格可以使用以下代码100%进行工作:
'<html lang="en">' +
'<head>' +
'<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">' +
'</head>' +
'<body>' +
'<table class="table" style="width: 75%; font-size: 12px; text-align: center; margin-left: 95px; display: block;">' +
'<thead>' +
'<tr>' +
'<th scope="col">ID:</th>' +
'<th scope="col">Test Status:</th>' +
'<th scope="col">Project Name / Server:</th>' +
'<th scope="col">Report Test Description:</th>' +
'<th scope="col">Browser:</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr>' +
'<th style="color: #3333ff;">' + IDcounter() + '</th>' +
$testStatusMessageColor_1 +
'<td>' + $projName + '</td>' +
'<td>' + $functions_1 + '</td>' +
'<td>' + $browserStatus + '</td>' +
'</tr><tr>' +
'<th style="color: #3333ff;">' + $IDcounter + '</th>' +
$testStatusMessageColor_2 +
'<td>' + $projName + '</td>' +
'<td>' + $functions_2 + '</td>' +
'<td>' + $browserStatus + '</td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</body>' +
'</html>' +
尽管,当我决定添加另一个显示(例如前面提到的HTML / CSS图表图形)时,它只是没有显示出来...
代码:
'<html>' +
'<head>' +
'<style type="text/css">' +
'body {font: 13px/1.3 "Lucida Grande",sans-serif; color: #666;}' +
'.chart {display: table; table-layout: fixed; width: 60%; max-width: 700px; height: 200px; margin: 0 auto; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%); background-size: 100% 50px; background-position: left top;}' +
'.chart li {position: relative; display: table-cell; vertical-align: bottom; height: 200px;}' +
'.chart span {margin: 0 1em; display: block; background: rgba(209, 236, 250, 0.75); animation: draw 1s ease-in-out;}' +
'.chart span:before {position: absolute; left: 0; right: 0; top: 100%; padding: 5px 1em 0; display: block; text-align: center; content: attr(title); word-wrap: break-word;}' +
'@keyframes draw {0% {height: 0;}}' +
'</style>' +
'</head>' +
'<body>' +
'<ul class="chart">' +
'<li>' +
'<span style="height:100%" title="Column 1"></span>' +
'</li>' +
'<li>' +
'<span style="height:80%" title="Column 2"></span>' +
'</li>' +
'</ul>' +
'</body>' +
'</html>' +
我相信这可能是因为不支持CSS语言(因为在浏览器中,“图表图形”可以100%起作用,但是在电子邮件正文消息中却不起作用)...该怎么办?
答案 0 :(得分:2)
免责声明:我是Image-Charts创始人。
遗憾的是,关键帧无法在电子邮件客户端以及许多高级CSS属性中使用。
要解决此问题,您可能要使用图表的图像。 Image-Charts之类的东西可以通过电子邮件发送图表,它是免费的,它可以在每个浏览器和电子邮件客户端上运行,并且可以进行动画处理(感谢gif!)。
https://image-charts.com/chart
?cht=p3
&chs=700x200
&chd=t:60,40
&chl=Hello|World
&chan
&chf=ps0-0,lg,45,ffeb3b,0.2,f44336,1|ps0-1,lg,45,8bc34a,0.2,009688,1