HTML 电子邮件在 Firefox 上显示错误

Question

我刚刚发了一封 HTML 电子邮件，看起来像这样：

它在 Chrome 和 Safari 上看起来不错，但在 Firefox 上看起来像这样：

这是代码

<head>
    <meta charset="utf-8">
</head>
<body>
    <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="600">
        <tr>
            <td colspan="5">
            <img src="http://pruebascolor2.com/digitalmenteguru/emkt/header.jpg" width="600" height="276" alt="Header">
            </td>
        </tr>
        <tr style="line-height: 1px;">
            <td rowspan="6" valign="top" style="line-height: 1px;">
            <img src="http://pruebascolor2.com/digitalmenteguru/emkt/fondo1.jpg" width="115" height="474" alt="Fondo 1" align="top">
            </td>
            <td colspan="3" width="370" height="41" bgcolor="#ffffff">
            </td>
            <td rowspan="6" valign="top">
            <img src="http://pruebascolor2.com/digitalmenteguru/emkt/fondo2.jpg" width="115" height="474" alt="Fondo 2">
            </td>
        </tr>
        <tr>
            <td colspan="3" width="370" height="58" bgcolor="#ffffff" align="center" style="padding-bottom:20px" >
            <span style="font-family:arial; font-size:17px; color:#005359">
            Tus datos ya están<br />
            <strong>registrados</strong>, 
            ahora estás un<br /> 
            paso más cerca de obtener
            </span>
            </td>
        </tr>
        <tr>
            <td rowspan="2" width="33" height="172" bgcolor="#ffffff">
            </td>
            <td style="line-height: 1px;">
            <img src="http://pruebascolor2.com/digitalmenteguru/emkt/beca.jpg" width="302" height="56" alt="Beca del 100%" style="display:inline; border:0">
            </td>
            <td rowspan="2" width="35" height="172" bgcolor="#ffffff">
            </td>
        </tr>
        <tr>
            <td width="302" height="100" bgcolor="#ffffff" align="center" valign="top" style="padding-top:15px">
            <span style="font-family:arial; font-size:17px; color:#005359">para tu matrícula.
            </span>
        </tr>
        <tr>
            <td colspan="3" style="line-height: 1px;">
            <a href="http://digitalmente.guru/index.php?action=form&ced='.$data['num_doc'].'" target="_blank">
                <img src="http://pruebascolor2.com/digitalmenteguru/emkt/boton.jpg" width="370" height="39" alt="Boton" style="display:inline; border:0">
            </a>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="line-height: 1px;">
            <img src="http://pruebascolor2.com/digitalmenteguru/emkt/contactanos.jpg" width="370" height="142" alt="Contactanos" style="display:inline; border:0">
            </td>
        </tr>
    </table>
</body>

有人可以帮我修复 Firefox 吗？

Answer 1

基本上，您的问题是由未编码的字符（在 Acid 字符转换器上使用电子邮件，www.emailonacid.com/character_converter/）或缺少样式（行高等）引起的。所有这些都可以解决，重新编码 table 结构，使其具有更多 "breathing space"。这是我快速修补它的尝试，它适用于 Firefox 和我的 Gmail/Hotmail/YahooMail 帐户：

<head>
    <meta charset="utf-8">
</head>
<body>
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
 <tr>
  <td>
   <img src="http://pruebascolor2.com/digitalmenteguru/emkt/header.jpg" width="600" height="276" border="0" style="display:block;" alt="Header"/>
  </td>
 </tr>
    <tr>
     <td>
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
 <tr>
  <td rowspan="2">
   <img src="http://pruebascolor2.com/digitalmenteguru/emkt/fondo1.jpg" width="115" height="474" border="0" style="display:block;" alt="Fondo 1">
  </td>
        <td valign="top" align="center">
   <table border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td style="font-family:arial; font-size:17px; color:#005359; padding-top:41px; padding-bottom:20px;" align="center">
                        Tus datos ya est&#225;n<br /><strong>registrados</strong>, ahora est&#225;s un paso<br />m&#225;s cerca de obtener

                    </td>
                </tr>
                <tr>
                 <td align="center">
                     <a href="http://pruebascolor2.com/" target="_blank"><img src="http://pruebascolor2.com/digitalmenteguru/emkt/beca.jpg" width="302" height="56" border="0" style="display:block;" alt="Beca del 100%"></a>
                    </td>
                </tr>
                <tr>
                    <td style="font-family:arial; font-size:17px; color:#005359; padding-top:15px; padding-bottom:60px;" align="center">
                        para tu matr&#237;cula.
                    </td>
                </tr>
                <tr>
                 <td align="center">
                     <a href="http://digitalmente.guru/index.php?action=form&ced='.$data['num_doc'].'" target="_blank"><img src="http://pruebascolor2.com/digitalmenteguru/emkt/boton.jpg" width="370" height="39" border="0" style="display:block;" alt="Boton"/></a>
                    </td>
                </tr>
            </table>
  </td>
        <td rowspan="2">
   <img src="http://pruebascolor2.com/digitalmenteguru/emkt/fondo2.jpg" width="115" height="474" border="0" style="display:block;" alt="Fondo 2">
  </td>
 </tr>
    <tr>
     <td valign="bottom">
         <img src="http://pruebascolor2.com/digitalmenteguru/emkt/contactanos.jpg" width="370" height="142" border="0" style="display:block;" alt="Contactanos">
        </td>
    </tr>
</table>
        </td>
    </tr>
</table>
</body>

HTML 电子邮件在 Firefox 上显示错误

HTML Email displaying wrong on Firefox

html

firefox

html-email