Pure HTML / CSS Vertical Char не будет отображаться в содержимом электронной почты при отправке через Sahi Pro - PullRequest
Новая
       33

Pure HTML / CSS Vertical Char не будет отображаться в содержимом электронной почты при отправке через Sahi Pro

0 голосов
/ 26 октября 2018

В моей автоматической электронной почте, которая на 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%, но не в сообщении основного сообщения) ... что я могу сделать с этим?

1 Ответ

0 голосов
/ 29 октября 2018

Отказ от ответственности: я основатель 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

a

...