Question

我对电子邮件的编码和设计还很陌生，因此我已经阅读了很多有关如何避免出现问题代码的文章。不过，我还是遇到了问题。

我正在尝试使用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&aring; <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>

Answer 1

您的代码中有一些错误...

例如，在这里您没有打开标签。

<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，检查出现的错误，并在更正所有错误后再试一次。

Answer 2

您的代码中存在一些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&aring;
                  <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>

电子邮件不会在iPhone上显示

2 个答案: