我对电子邮件的编码和设计还很陌生,因此我已经阅读了很多有关如何避免出现问题代码的文章。不过,我还是遇到了问题。
我正在尝试使用HTML编写电子邮件,该电子邮件在除iPhone之外的所有其他平台上均能正常工作。在iPhone上,仅<>之间显示了一些链接,似乎所有HTML都被剥夺了。
我的同事第一次使用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">
<head>
<style>
#knapp {
background-color:#00A49C;
border-radius:30px;
color:#ffffff;
display:inline-block;
font-family:arial;
font-size:15px;
line-height:42px;
text-align:center;
text-decoration:none;
width:200px;
-webkit-text-size-adjust:none;
}
p {
font-family: arial; font-size: 14pt; color: #1D2242;
}
h1 {
font-family: arial; font-size: 16pt; color: #1D2242;
}
#bakgrunn {
background-color: #F3F1E9; width: 98%; padding: 20px;
}
body {
background-color: #F3F1E9;
}
</style>
</head>
<body bgcolor="#F3F1E9">
<center>
<!-- Ytterste table -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="98%" style="background-color: #F3F1E9; width: 98%; padding: 20px" id="bakgrunn">
<tr>
<td align="center" valign="top">
<!-- header-table -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td style="padding: 40px 0px 10px 0px;">
<center><a href="https://xxx.no/familie"><img src="https://unity.xxx.no/Portal/Images/xxx_logo_Grey.png" alt="xxx Familie-logo" width="150px" align="center"></a></center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- Hoved-table -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" style="max-width: 500px">
<tr>
<td>
<h1 style="font-family: arial; font-size: 16pt; color: #1D2242">Hovedtittel</h1>
<p style="font-family: arial; font-size: 14pt; color: #1D2242; line-height: 1.4">
Tekst</p> <p style="font-family: arial; font-size: 14pt; color: #1D2242; line-height: 1.4">Last ned xxx Familie til din telefon i dag på <a href="https://itunes.apple.com/no/developer/xxx-as/id331546826?l=nb" style="color: #0080D7">iOS</a> eller <a href="https://play.google.com/store/apps/developer?id=xxx+AS&hl=no" style="color: #0080D7">Android</a>!
</br></p>
<center><table>
<tbody>
<tr>
<td><a href="https://itunes.apple.com/no/developer/xxx-as/id331546826?l=nb"><img style="height: 45px; padding:10px 5px 7px 5px" alt="Apple store" src="https://xxx.no/wp-content/uploads/2019/05/App-store-ikon.png"></a></td>
<td><a href="https://play.google.com/store/apps/developer?id=xxx+AS&hl=no"><img style="height: 45px; padding:10px 5px 7px 5px" alt="Google play" src="https://xxx.no/wp-content/uploads/2019/05/Google-play-ikon.png"></a></td>
</tr>
</tbody>
</table></center>
<p style="font-family: arial; font-size: 14pt; color: #1D2242; line-height: 1; padding-bottom:0px; margin-bottom:-10px;">
<strong>Tittel</strong>
</p><p style="font-family: arial; font-size: 14pt; color: #1D2242; line-height: 1.4;padding-top:0px">tekst</a>.
</br></p>
</br>
<!-- Button -->
<center><div>
<a href="http://xxx.no/familie"
style="
background-color:#00A49C;
border-radius:30px;
color:#ffffff;
display:inline-block;
font-family:arial;
font-size:15px;
line-height:42px;
text-align:center;
text-decoration:none;
width:200px;
-webkit-text-size-adjust:none;">Les mer</a>
</div></center>
<!-- slutt Button -->
</br>
<p style="font-family: arial; font-size: 14pt; color: #1D2242; line-height: 1.4">Hilsen oss i xxx
</p>
</td>
</tr>
</table>
<!-- Slutt Hoved-table -->
</td>
</tr>
<tr>
<td>
<!-- Footer-table -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" style="padding-bottom: 30px">
<tr>
<td>
<center>
<div style="padding:0px; margin: -5px"><p style="font-family: arial; font-size: 10pt; color: #1D2242; font-style: italic; line-height: 1">
<a href="mailto:hei@xxx.no" style="color: #0080D7">hei@xxx.no</a>
</p></div>
<div style="padding:0px; margin: -5px 0px 10px 0px"><p style="font-family: arial; font-size: 10pt; color: #1D2242; font-style: italic; line-height: 1"><a href="https://xxx.no/personvernpolicy/" style="color: #0080D7">Personvern</a>
</p></div>
<center>
<a href="http://facebook.com/xxxx/"><img src="https://xxx.no/wp-content/uploads/2019/04/Facebook-1.png" style="height: 20px; padding: 5px" alt="Facebook"></a>
<a href="http://twitter.com/xxx"><img src="https://xxx.no/wp-content/uploads/2019/04/Twitter-1.png" style="height: 20px; padding: 5px" alt="Twitter"></a>
<a href="http://youtube.com/channel/UCaXOA8S5shv0XDb3Dontz4w"><img src="https://xxx.no/wp-content/uploads/2019/04/YouTube.png" style="height: 20px; padding: 5px" alt="YouTube"></a>
<a href="http://linkedin.com/company/xxx-as/"><img src="https://xxx.no/wp-content/uploads/2019/04/LinkedIn.png" style="height: 20px; padding: 5px" alt="LinkedIn"></a> </center>
</center>
</td>
</tr>
</table>
<!-- Slutt Footer-table -->
</td>
</tr>
</table><!-- Slutt ytterste table -->
</center>
</body>
</HTML>
答案 0 :(得分:0)
您的代码中有一些错误...
例如,在这里您没有打开标签。
<td style="padding: 40px 0px 10px 0px;">
http://www.helenefosse.no/wp-content/uploads/2017/03/HF-logo_black.png" alt="Sensio Familie-logo" width="150px" align="center"></a></center>
</td>
您具有不带mailto:的电子邮件链接,等等,等等...
我建议您使用https://validator.w3.org/来验证您的html,检查出现的错误,并在更正所有错误后再试一次。
答案 1 :(得分:-1)
您的代码中存在一些HTML错误。在这里,我已经纠正了所有这些问题。
编辑:问题编辑后更新了代码。
<!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">
<head>
<style>
#knapp {
background-color: #00A49C;
border-radius: 30px;
color: #ffffff;
display: inline-block;
font-family: arial;
font-size: 15px;
line-height: 42px;
text-align: center;
text-decoration: none;
width: 200px;
-webkit-text-size-adjust: none;
}
p {
font-family: arial;
font-size: 14pt;
color: #1D2242;
}
h1 {
font-family: arial;
font-size: 16pt;
color: #1D2242;
}
#bakgrunn {
background-color: #F3F1E9;
width: 98%;
padding: 20px;
}
body {
background-color: #F3F1E9;
}
</style>
</head>
<body bgcolor="#F3F1E9">
<center>
<!-- Ytterste table -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="98%" style="background-color: #F3F1E9; width: 98%; padding: 20px" id="bakgrunn">
<tr>
<td align="center" valign="top">
<!-- header-table -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td style="padding: 40px 0px 10px 0px;">
<center>
<a href="https://xxx.no/familie"><img src="https://unity.xxx.no/Portal/Images/xxx_logo_Grey.png" alt="xxx Familie-logo" width="150px" align="center"></a>
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- Hoved-table -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" style="max-width: 500px">
<tr>
<td>
<h1 style="font-family: arial; font-size: 16pt; color: #1D2242">Hovedtittel</h1>
<p style="font-family: arial; font-size: 14pt; color: #1D2242; line-height: 1.4">
Tekst</p>
<p style="font-family: arial; font-size: 14pt; color: #1D2242; line-height: 1.4">Last ned xxx Familie til din telefon i dag på
<a href="https://itunes.apple.com/no/developer/xxx-as/id331546826?l=nb" style="color: #0080D7">iOS</a> eller <a href="https://play.google.com/store/apps/developer?id=xxx+AS&hl=no" style="color: #0080D7">Android</a>!
<br/>
</p>
<center>
<table>
<tbody>
<tr>
<td>
<a href="https://itunes.apple.com/no/developer/xxx-as/id331546826?l=nb">
<img style="height: 45px; padding:10px 5px 7px 5px" alt="Apple store" src="https://xxx.no/wp-content/uploads/2019/05/App-store-ikon.png">
</a>
</td>
<td>
<a href="https://play.google.com/store/apps/developer?id=xxx+AS&hl=no">
<img style="height: 45px; padding:10px 5px 7px 5px" alt="Google play" src="https://xxx.no/wp-content/uploads/2019/05/Google-play-ikon.png">
</a>
</td>
</tr>
</tbody>
</table>
</center>
<p style="font-family: arial; font-size: 14pt; color: #1D2242; line-height: 1; padding-bottom:0px; margin-bottom:-10px;">
<strong>Tittel</strong>
</p>
<p style="font-family: arial; font-size: 14pt; color: #1D2242; line-height: 1.4;padding-top:0px">
<a>tekst</a>.
<br/>
</p>
<br/>
<!-- Button -->
<center>
<div>
<a href="http://xxx.no/familie" style="
background-color:#00A49C;
border-radius:30px;
color:#ffffff;
display:inline-block;
font-family:arial;
font-size:15px;
line-height:42px;
text-align:center;
text-decoration:none;
width:200px;
-webkit-text-size-adjust:none;">Les mer</a>
</div>
</center>
<!-- slutt Button -->
<br/>
<p style="font-family: arial; font-size: 14pt; color: #1D2242; line-height: 1.4">Hilsen oss i xxx
</p>
</td>
</tr>
</table>
<!-- Slutt Hoved-table -->
</td>
</tr>
<tr>
<td>
<!-- Footer-table -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" style="padding-bottom: 30px">
<tr>
<td>
<center>
<div style="padding:0px; margin: -5px">
<p style="font-family: arial; font-size: 10pt; color: #1D2242; font-style: italic; line-height: 1">
<a href="mailto:hei@xxx.no" style="color: #0080D7">hei@xxx.no</a>
</p>
</div>
<div style="padding:0px; margin: -5px 0px 10px 0px">
<p style="font-family: arial; font-size: 10pt; color: #1D2242; font-style: italic; line-height: 1">
<a href="https://xxx.no/personvernpolicy/" style="color: #0080D7">Personvern</a>
</p>
</div>
<center>
<a href="http://facebook.com/xxxx/"><img src="https://xxx.no/wp-content/uploads/2019/04/Facebook-1.png" style="height: 20px; padding: 5px" alt="Facebook"></a>
<a href="http://twitter.com/xxx"><img src="https://xxx.no/wp-content/uploads/2019/04/Twitter-1.png" style="height: 20px; padding: 5px" alt="Twitter"></a>
<a href="http://youtube.com/channel/UCaXOA8S5shv0XDb3Dontz4w"><img src="https://xxx.no/wp-content/uploads/2019/04/YouTube.png" style="height: 20px; padding: 5px" alt="YouTube"></a>
<a href="http://linkedin.com/company/xxx-as/"><img src="https://xxx.no/wp-content/uploads/2019/04/LinkedIn.png" style="height: 20px; padding: 5px" alt="LinkedIn"></a>
</center>
</center>
</td>
</tr>
</table>
<!-- Slutt Footer-table -->
</td>
</tr>
</table>
<!-- Slutt ytterste table -->
</center>
</body>
</html>