Outlook无法在我的HTML邮件模板中加载我的CSS样式。

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

我正在尝试创建自定义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 [email protected]')}}" 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:[email protected]" class="email-text" style="text-decoration: none;font-size: 17px;padding-right: 18px;">[email protected]</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:[email protected]">[email protected]</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>
html css
1个回答
0
投票

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"> 将'any'改为类选择器,并添加更多的div来显示元素。


0
投票

我通过移除padding和确保内联样式的正确实现以及移除样式块来解决这个问题。

<!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">
<style>
 .hryellow{
      border-top: solid 1px  #f7de02;
      width: 95%;
      margin-top: 20px;
      margin-bottom: 35px;
      margin-left: 15px;
    }


 .hryellow2{
      border-top: solid 1px  #f7de02;
      width: 85%;
      margin-top: 20px;
      margin-bottom: 35px;
      margin-left: 15px;
    }

    .hrGray{
      border-top: solid 1px  #bacadf;
      width: 95%;
      margin-top: 20px;
      margin-bottom: 35px;
      margin-left: 15px;
    }
 </style>
</head>

</html>
<table   align="center" cellpadding="0" cellspacing="0" width="600" style="width: 600;-premailer-width: 600px;text-align: center;">
  <tr>
    <td align="center"  style="padding: 5px 0 5px 0;">
      <img src="https://api.goshift.me/images/android-icon-192x192.png" alt="Creating Email Magic" width="150" height="150" style="display: block;">
      <!-- <hr style="border-top: 1px solid #ffff00; width: 85%;margin-top: -18px;"> -->

      <div class="hryellow2">&nbsp;</div>

      <div>
                <span  style="color: #151f6d;font-family: MavenPro;font-size: 21px;font-weight: bold;">
                      Hello {{$data['CUSTOMER_NAME']}}</span>
        <p  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  style="padding: 0px -0 14px 0px;">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr  style="background-color: #151f6d;width: 134px;height: 10px;font-family: MavenPro;font-size: 8.1px;font-weight: 900;color: #ffffff;text-align: left;">
          <th  style="width: 1%; height: 40px; font-size: 17px;">

          </th>

          <th  style="width: 45%;height: 40px;  font-size: 17px;border-right: 1px solid #898eb5;">
           <span style="    margin-left: 19px;">
           
            Before Picture
           </span>
          </th>

          <th  style="width: 45%; height: 40px;  font-size: 17px;">
          <span style="    margin-left: 25px;">
          
            After Picture
          </span>
          </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   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;">
                {{$i}}
              </td>

              <td>
                <div    style="margin-left: -77px;   margin-top: 12px;  ">
                  <img      width="260"  height="150"; src="{{$image['before']}}" style="text-align: center; border: solid 0.5px #a7bcd6;margin-top: 10px;margin-right: -72px;">
                </div>
              </td>

              <td>
                <div   style="margin-left: 7px;   margin-top: 12px;  "  >
                  <img  width="260"  height="150" src="{{$image['after']}}" style="text-align: center; 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>
          <!-- <hr style="border-top: 1px solid #bacadf; width:95%; margin-left: 15px;"/> -->

      <div class="hrGray">&nbsp;</div>

          <div  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 [email protected]')}}" width="95%" alt="">

 
        </div>
        <div>
          <!-- <hr style="border-top: 1px solid #ffff00; width: 95%; margin-left: 15px;"/> -->


      <div class="hryellow">&nbsp;</div>

        </div>

      </div>
    </td>


  </tr>
  <tr>


    <td>
      <table   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  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   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   style="text-align: right;">
            <h6    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"   style="padding-right: 18px;text-decoration: none;">9200 14818</a>
            </h6>

          </td>

        </tr>
        <tr>
          <td>
            <h6    style="text-align: left;color: #272a67;font-size: 17px;margin-bottom: 0px;margin-top: 0;padding: 0;padding-left: 10px;">Email :</h6>
          </td>
          <td   style="text-align: right;">
            <h6   style="text-align: right;"><a href="mailto:[email protected]"   style="text-decoration: none;font-size: 17px;padding-right: 18px;">[email protected]</a></h6>
          </td>
        </tr>
      </table>
    </td>
  </tr>

  <!-- <tr>

      <td  
          <span>
              Email :

          </span>

      </td>
      <td            <a style="margin-left: -89px" href="mailto:[email protected]">[email protected]</a>
      </td>
  </tr> -->

  <tr>
    <td  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  style="background-color: #272a67;">
      <table   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   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="https://api.goshift.me/images/Instagram@3x (1).png" width="17" height="17"></a>



          </td>

          <td  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="https://api.goshift.me/images/linkedin.png" width="17" height="17"></a>


          </td>
          <td  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="https://api.goshift.me/images/youtube-2-icon-18-64.png" width="17" height="17"></a>


          </td>
          <td    align="right" style="text-align: right;background-color: #272a67;padding: 18px 33px 18px 33px;">
            <span  style="text-align: right;"><a style="color: #fff;" href="https://www.goshift.me/" > ww.goshift.me</a></span>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
© www.soinside.com 2019 - 2024. All rights reserved.