我正在尝试创建自定义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>
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来显示元素。
我通过移除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"> </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"> </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"> </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>