时间戳

首页 > 解决方案 > Outlook 不会在我的 HTML 电子邮件模板中加载我的 CSS 样式

html - Outlook 不会在我的 HTML 电子邮件模板中加载我的 CSS 样式

问题描述

我正在尝试创建自定义 HTML 电子邮件模板，它在网络邮件上完美加载，但在 Outlook 上没有加载我创建的大部分样式我尝试使用内联样式和 mos- 前缀，但没有任何改变，我找不到任何参考或指导编写与 Outlook 一起使用的样式，这是我的代码。

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

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

</head>

</html>
<table class="email-wrapper" align="center" cellpadding="0" cellspacing="0" width="600" style="width: 600;-premailer-width: 600px;text-align: center;">
  <tr>
    <td align="center" class="messagePaading" style="padding: 5px 0 5px 0;">
      <img src="{{asset('/images/android-icon-192x192.png')}}" alt="Creating Email Magic" width="150" height="150" style="display: block;">
      <hr style="border-top: 1px solid yellow; width: 85%;margin-top: -18px;">
      <div>
                <span class="nameText" style="color: #151f6d;font-family: MavenPro;font-size: 21px;font-weight: bold;">
                      Hello {{$data['CUSTOMER_NAME']}}</span>
        <p class="messageText" style="font-size: 17px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: -0.09px;text-align: center;color: #a7bcd6;width: 573px;">
                    #{{$data['CONTRACT_NO']}} شكرا لاختيارك شفت إنك كمزود النقل الذكي الخاص بك. يرجى ملاحظة أنه عند إغلاق العقد
                    لاحظنا بعض الأضرارعلى سيارتكز الجدول ادناه يلخص الأضرار و الرسوم المقابلة لنفسه

                    <br><br> 
          Thank you for selecting Shift inc. as your smart transportation provider. Please note that upon
          closing the contract # {{$data['CONTRACT_NO']}} we have noticed some damages on your car. The below table summaries the
          damages and the corresponding charges for the same.
        </p>
      </div>

    </td>

  </tr>
  <tr>
    <td class="imagesTablePadding" style="padding: 0px -0 14px 0px;">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr class="imagesTable" style="background-color: #151f6d;width: 134px;height: 10px;font-family: MavenPro;font-size: 8.1px;font-weight: 900;color: #ffffff;text-align: left;">
          <th class="numbersCol" style="width: 10%;padding: 8px;font-size: 17px;">

          </th>

          <th class="beforePicture" style="width: 45%;padding: 8px;font-size: 17px;border-right: 1px solid #898eb5;padding-right: 10px;padding-left: 56px;">
            Before Picture
          </th>

          <th class="afterPicture" style="width: 45%;padding: 8px;font-size: 17px;padding-left: 52px;">
            After Picture
          </th>
        </tr>


        @if(count($data['images']) > 0)
          <?php $i = 1;?>
          @foreach($data['images'] as $image)
            <?php
            $image['before'] = str_replace('https', 'http', $image['before']);
            $image['after'] = str_replace('https', 'http', $image['after']);
            ?>
            <tr>
              <td class="numbersColFont" style="text-align: center;width: 9px;height: 10px;font-size: 17px;font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1.46;letter-spacing: normal;color: #151f6d;padding-left: 9px;">
                {{$i}}
              </td>

              <td>
                <div class="imageBeforDiv" style="margin-left: -102px;">
                  <img class="imagesOntheRight" src="{{$image['before']}}" style="text-align: center;width: 134px;height: 98px;border: solid 0.5px #a7bcd6;margin-top: 10px;margin-right: -91px;">
                </div>
              </td>

              <td>
                <div class="imageAfterDiv" style="margin-left: -20px;">
                  <img class="imagesOnTheLift" src="{{$image['after']}}" style="text-align: center;width: 134px;height: 98px;border: solid 0.5px #a7bcd6;margin-top: 10px;">
                </div>
              </td>
            </tr>
            <?php $i++;?>
          @endForeach
        @endif
      </table>


  </td></tr><tr>
    <td>
      <div style="text-align: center;">
        <div>
          <div style="border-top: 1px solid #bacadf; width:95%; margin-left: 15px;"></div>
          <div class="total" style="text-align: right;padding-top: 5px;padding-bottom: 10px;font-family: MavenPro;font-size: 21px;font-weight: bold;color: #151f6d;margin-right: 47px;"><span>Total: {{$data['DAMAGE_CHARGE']}} SR </span> </div>
        </div>
        <div style=" padding-bottom: 8px;">
           <img src="{{asset('images/Group 4@3x.png')}}" width="95%" alt="">
        </div>
        <div>
          <div style="border-top: 1px solid yellow; width: 95%; margin-left: 15px;"></div>
        </div>

      </div>
    </td>


  </tr>
  <tr>


    <td>
      <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" style="width: 570px;margin: 0 auto;padding: 0;-premailer-width: 570px;-premailer-cellpadding: 0;-premailer-cellspacing: 0;background-color: #FFFFFF;">
        <tr>
          <td>
            <p class="feelFree" style="font-family: MavenPro;font-size: 17px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;text-align: left;color: #a7bcd6;width: 431px;padding-left: 10px;">Feel free to reach out to our team for any further assistance</p>

          </td>
        </tr>
        <tr>
          <td>
            <h6 class="align-left colorblue" style="text-align: left;color: #272a67;font-size: 17px;margin-bottom: 0px;margin-top: 0;padding: 0;padding-left: 10px;">Call Center Number :</h6>
          </td>
          <td class="align-right" style="text-align: right;">
            <h6 class="align-right colorblue" style="text-align: right;color: #272a67;font-size: 17px;margin-bottom: 0px;margin-top: 0;padding: 0;padding-left: 10px;">
              <a href="tel:9200 14818" class="call-center_number" style="padding-right: 18px;text-decoration: none;">9200 14818</a>
            </h6>

          </td>

        </tr>
        <tr>
          <td>
            <h6 class="align-left colorblue" style="text-align: left;color: #272a67;font-size: 17px;margin-bottom: 0px;margin-top: 0;padding: 0;padding-left: 10px;">Email :</h6>
          </td>
          <td class="align-right" style="text-align: right;">
            <h6 class="align-right" style="text-align: right;"><a href="mailto:reach.us@goshift.me" class="email-text" style="text-decoration: none;font-size: 17px;padding-right: 18px;">reach.us@goshift.me</a></h6>
          </td>
        </tr>
      </table>
    </td>
  </tr>

  <!-- <tr>

      <td class="email">

          <span>
              Email :

          </span>

      </td>
      <td class="emailText">
          <a style="margin-left: -89px" href="mailto:reach.us@goshift.me">reach.us@goshift.me</a>
      </td>
  </tr> -->

  <tr>
    <td class="smarterWay" style="font-family: MavenPro;font-size: 17px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;text-align: center;color: #a7bcd6;">
      <p>
        A Smarter Way To Get Around
        <br>Shift inc. Team

      </p>
    </td>
  </tr>
  
  


  <tr>
    <td class="backgroundcolorblue" style="background-color: #272a67;">
      <table class="email-footer" align="" width="570" cellpadding="0" cellspacing="0" style="width: 100%;margin: 0 auto;padding: 0;-premailer-width: 570px;-premailer-cellpadding: 0;-premailer-cellspacing: 0;text-align: center;">
        <tr>
          <!-- <td class="content-cell3 backgroundcolorblue align-left" align="left" style="width: 17px">
            <img src="/images/facebook.png" width="17" height="17">
          </td> -->
          <td class="content-cell2 backgroundcolorblue align-left" align="left" style="width: 17px;padding-left: 17px;text-align: left;background-color: #272a67;padding: 18px 3px 18px 6px;">
            <a href="https://instagram.com/shiftinc_sa?igshid=4bko9iitw8qo">
              <img src="{{asset('/images/Instagram@3x (1).png')}}" width="17" height="17"></a>



          </td>

          <td class="content-cell2 backgroundcolorblue align-left" align="left" style="width: 17px;text-align: left;background-color: #272a67;padding: 18px 3px 18px 6px;">

            <a href="https://www.linkedin.com/company/goshiftme/">
              <img src="{{asset('/images/linkedin.png')}}" width="17" height="17"></a>


          </td>
          <td class="content-cell2 backgroundcolorblue align-left" align="left" style="width: 17px;text-align: left;background-color: #272a67;padding: 18px 3px 18px 6px;">

            <a href="https://www.youtube.com/channel/UCGFN6xXKk06PnhfAS0_cPiA">
              <img src="{{asset('/images/youtube-2-icon-18-64.png')}}" width="17" height="17"></a>


          </td>
          <td class="content-cell backgroundcolorblue align-right" align="right" style="text-align: right;background-color: #272a67;padding: 18px 33px 18px 33px;">
            <span class="sub align-right " style="text-align: right;"><a style="color: #fff;" href="https://www.goshift.me/" class="colorwhite">www.goshift.me</a></span>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

标签： htmlcss

解决方案

CSS 不会显示在任何电子邮件中。试试这个：（制作一个新的 HTML 文档）

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title> Your title </title>
</head>
<body>
<div class="any">
<!-- use your class names -->
<!-- this will hopefully show in your eMail -->

这有望显示在您的电子邮件中。确保编辑href指向 CSS 文档名称的链接。将<div class="any">更改“任何”更改为类选择器并添加更多 div 以显示元素。

推荐阅读