HTML电子邮件签名显示问题

问题描述 投票：0回答：1

这是我创建的第一个html邮件签名，现在我发现了为什么我不做签名--真麻烦！不管我怎么做，似乎在一个客户端或另一个客户端都不能正确显示。

似乎无论我怎么做，都无法在一个客户端或另一个客户端正确显示。

我使用的下面的代码在Android和Mac Outlook客户端中显示正确，但是当我第一次将它上传到outlook时，有一个表格缠绕的错误，我通过将outlook中的表格改为nowrap来纠正。但是现在从outlook发送这个邮件签名时，在ios上看就坏了。

我知道我的代码可能不是很好，因为这是我第一次做这些。谁能帮我解决一下？

帮帮我，StackOverflow，你是我唯一的希望!

这是我的代码。

<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<STYLE>
<!--
a:hover {
	color : #282931;
	text-decoration : none;

a.gold:link, a:visited {
	color : #282931;
	text-decoration : none;
}
a.gold:hover {
	color : #282931;
	text-decoration : none;


}
-->
<!--
<style>
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@300;700&display=swap');
</style>

</STYLE>
  <tr>
    <td width="0" bgcolor="#f3f3f1">

          
        
    </td>
    <td bgcolor="#f3f3f1" width="400">
        <p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300;  letter-spacing: 1px;">

     
            Ben Tindall
            <br>
            <span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">

            Managing Director + Licensee            
            </span>
        </p>

        <p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px;   margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
          
          
            179 Darby Street Cooks Hill
            <br />

       
            NSW 2300
            </a>
        </p>

      <p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px;   margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">          
            <a href="tel:000000000" style="text-decoration: none;color:#000000">Call the office. &nbsp;&nbsp;
            <a href="tel:000000000" style="text-decoration: none; color: #000000">Call Me. &nbsp;&nbsp;
                <a href="mailto:[email protected]" style="text-decoration: none;color: #000000;font-size: 9px; white-space: nowrap">Email me.
            <br /> 
       <p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px;   margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">          
    
            </a>
            
           
            <a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif; class="gold"> 

            villagerproperty.com.au
            </a>
      </p>


      </p>

      <p style="margin-bottom:0px;  margin-left:15px; margin-top:0px;">
          
            <a href="https://www.facebook.com/villagerproperty" target="_blank"> 

            <img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>&nbsp;&nbsp;&nbsp;&nbsp;
            
     
            <a href="https://www.instagram.com/villagerproperty/" target="_blank"> 

          
            <img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>&nbsp;&nbsp;&nbsp;&nbsp; 
            
         
            <a href="https://www.linkedin.com/in/ben-tindall-a8458799/  " target="_blank"> 


            <img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>&nbsp;&nbsp;&nbsp;&nbsp;
            
        
            <a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank"> 

  
           <img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>         
           </a>      
        </p>

    </td>
 <td align="right" valign="top" bgcolor="#f3f3f1">

        <p style="margin-right:0px; margin-top:0px; margin-left: 10px">


             <img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png"> 
            <br> <p bgcolour= "ffffff">
        </p>

    </td>
   
</tr>
<tr>
    <td colspan="4">
              <p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
          This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
      </p>  

      <p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
          
          Please consider the environment before printing this email. 
      </p> <br>
          <table cellspacing="0" cellpadding="0" border="0" width="100%" style="width: 100% !important;">
        <tr>
            <td align="left" valign="top" width="600px" height="1" style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"><!--[if gte mso 15]>&nbsp;<![endif]--></td>
        </tr>
    </table>


    </td>
</tr>
</table>

谢谢@Nathan的帮助！你的修复方法很好，但是在iOS上看的时候：包裹错误

这是因为我将表格宽度设置为%而不是固定的px吗？

我为所有的问题道歉--我对html签名很陌生，而且我似乎遇到了很多麻烦！这是我创建的第一个html邮件签名，我现在发现为什么我不做签名--真是太麻烦了。

html layout html-email
1个回答
1
投票

一对夫妇的帮助的未来。

运行你的HTML通过w3c HTML验证检查（和CSS，但这是不太有用）。有不少微小但重要的错误：没有关闭 </a> 在正确的位置（它是内联的，所以在块元素之前关闭它，如 <p> 或 <br>)，或者不关闭东西，或者忘记引号。

如果您使用 https:/validator.w3.org#validate_by_input。 忽略所有过时的信息（信息过滤按钮可以关闭它们）--电子邮件对它来说太老派了！这也是我的一个想法。

认真地说，除了删除几个多余的td'stables之外，就只有这些了。

有一种可能性是Windows的Outlook搞乱了你的代码，它是这样的。但从Mac上的Outlook应该是没有问题的。

这里是工作代码。

<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<style>
a:hover {
    color : #282931;
    text-decoration : none;

a.gold:link, a:visited {
    color : #282931;
    text-decoration : none;
}
a.gold:hover {
    color : #282931;
    text-decoration : none;


}

@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@300;700&display=swap');
</style>

  <tr>
     <td bgcolor="#f3f3f1" width="400">
        <p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300;  letter-spacing: 1px;">


            Ben Tindall
            <br>
            <span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">

            Managing Director + Licensee            
            </span>
        </p>

        <p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px;   margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">


            179 Darby Street Cooks Hill
            <br />


            NSW 2300
        </p>

      <p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px;   margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">          
          <a href="tel:000000000" style="text-decoration: none;color:#000000">Call the office.</a> &nbsp;&nbsp;
          <a href="tel:000000000" style="text-decoration: none; color: #000000">Call Me.</a> &nbsp;&nbsp;
                <a href="mailto:[email protected]" style="text-decoration: none;color: #000000;font-size: 9px; white-space: nowrap">Email me.</a>
        </p>
       <p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px;   margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">          




            <a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif;" class="gold"> 

            villagerproperty.com.au
            </a>
      </p>

      <p style="margin-bottom:0px;  margin-left:15px; margin-top:0px;">

            <a href="https://www.facebook.com/villagerproperty" target="_blank"> 

            <img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>&nbsp;&nbsp;&nbsp;&nbsp;


            <a href="https://www.instagram.com/villagerproperty/" target="_blank"> 


            <img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>&nbsp;&nbsp;&nbsp;&nbsp; 


            <a href="https://www.linkedin.com/in/ben-tindall-a8458799/  " target="_blank"> 


            <img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>&nbsp;&nbsp;&nbsp;&nbsp;


            <a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank"> 


           <img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>         
           </a>      
        </p>

    </td>
 <td align="right" valign="top" bgcolor="#f3f3f1">

        <p style="margin-right:0px; margin-top:0px; margin-left: 10px">
             <img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png" alt="" role="presentation">
        </p>

    </td>

</tr>
<tr>
    <td colspan="4">
              <p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
          This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
      </p>  

      <p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">

          Please consider the environment before printing this email. 
      </p>


    </td>
</tr>
</table>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.