1. 首頁
  2. 問答
  3. HTML電子郵件瀏覽器兼容性問題

HTML電子郵件瀏覽器兼容性問題

2013-01-22 46 views
0

我遇到了電子郵件問題我正在編碼，我一直無法找到答案。在瀏覽器中查看HTML文件時，我有一個可以正常顯示的區域，但Gmail和IE等瀏覽器導致了一些問題。排列錯亂，圖像不能坐在正確的地方，等等。我認爲我遇到的問題是，在某些瀏覽器中，我的右欄與文本被推到我的項目符號欄下。我想知道是否有任何可以找到我的代碼中的一些缺陷，可以幫助我。這裏是一個的給我麻煩的部分：HTML電子郵件瀏覽器兼容性問題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>ISSGT 2013</title> 
</head> 

<body> 

<!--Header--> 
<table border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse:0px;margin-bottom:5px;"> 
<tr> 
<td> 
<a href="http://www.ieee-isgt.org"><img src="header.jpg" alt="Header" height="86" width="600" style="display:block;border:0;vertical-align:bottom;"/></a> 
</td> 
</tr> 
</table> 

<!--Headline--> 
<table width="600" border="0" align="center" cellspacing="0"> 
<tr> 
<td align="center" style="background-color:#436ead; padding-top:10px; padding-right:30px; padding-bottom:10px; padding-left:30px;"> 

<table cellspacing="0"> 
<tr> 
<td style="font-family:Arial, Helvetica, sans-serif;font-size:19px;line-height:22px;font-weight:normal;color:#fff;text-align:center;margin-top:-15px;">The 4th Annual IEEE PES Conference on<br />Innovative Smart Grid Technologies is less than<br /><span style="font-family:Arial, Helvetica, sans-serif;font-size:44px;line-height:43px;font-weight:bold;color:#fff;text-align:center;">6 WEEKS AWAY!</span></td> 
</tr> 
</table> 

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

<!--Body--> 
<table align="center" cellspacing="0" style="margin-top:10px; vertical-align:top;"> 
<tr> 
<td width="540" style="font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:18px;font-weight:bold;color:#141313;text-align:left;">Very soon, hundreds of your colleagues &#8211; smart grid practitioners, executives, researchers and policy makers &#8211; will gather in Washington D.C. to review and discuss ground&#8211;breaking innovations in smart grid technologies.</td> 
</tr> 
</table> 

<table align="center" cellspacing="0" style="margin-top:10px;vertical-align:top;"> 
<tr> 
<td align="center" cellpadding="0" cellspacing="0" style="border-collapse:0px;vertical-align:top;"> 


<table width="540" align="center" cellspacing="0" style="margin-top:10px;vertical-align:top;"> 
<tr> 
<td height="auto" width="540" style="font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:18px;font-weight:normal;color:#141313;text-align:left;margin-top:10px">In addition to the impressive roster of keynote speakers, and presentations by recognized leaders in the field, here are some compelling reasons <span style="font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:18px;font-weight:bold;color:#141313;text-align:left;">why you MUST attend this year’s event&#58;  </span></td> 
</tr> 
</table> 


<!--Container--> 
<table height="auto" width="600" align="center" cellspacing="0" cellpadding="0" style="margin-top:15px;border-collapase:0px;vertical-align:top;"> 
<tr> 

<!--Image--> 
<td height="298" width="243" cellpadding="0" cellspacing="0" style="font-size:0px;line-height:0px;border-collapse:0px;"><img src="dc1.jpg" alt="Washington DC" height="298px" width="243px" style="display:block;border:0;overflow:hidden;margin:0px;padding:0px;vertical-align:bottom;font-size:0px;line-height:0px;"/></td> 



<!--Bullet Container--> 
<td style="vertical-align:top;border:0;border-collapse:0;"> 
<table height="auto" width="357" cellspacing="0" align="center" style="vertical-align:top;border-collapse:0px;float:right;display:inline;"> 


<!-- Bullet 1--> 

<tr> 
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;border-collapse:0px;">&bull;</td> 

<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">RESULTS&#58;</span>Learn about real-practice technology, deployment experience, and customer acceptance issues related to smart grid.</td> 
</tr> 


<!-- Bullet 2--> 
<tr> 
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">&bull;</td> 

<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">NETWORKING&#58;</span>Meet and speak directly with industry leaders, regulators and entrepreneurs working with the smart grid.</td> 
</tr> 

<!-- Bullet 3--> 
<tr> 
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">&bull;</td> 

<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">OPPORTUNITY&#58;</span>International speakers will report on real success stories and pitfalls – as well as current business.</td> 
</tr> 

<!-- Bullet 4--> 
<tr> 

<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">&bull; </td> 

<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">RESEARCH&#58;</span>Noted academics and practitioners talk candidly about their work in making smart grid a cost-effective proposition.</td> 
</tr> 

</table> 

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


<table height="auto" width="600" align="center" cellspacing="0" cellpadding="0" style="border-collapse:0px;font-size:0px;line-height:0px;"> 
<tr> 
<td><img src="dc2.jpg" alt="Washington DC" height="48px" width="600px" style="display:block;border:0;overflow:hidden;vertical-align:bottom"/></td> 
</tr> 
</table> 

<table width="600px" height="auto" align="center" style="background-color:#168116;vertical-align:top;"> 
<tr> 
<td style="font-family:Arial, Helvetica, sans-serif;font-size:27px;line-height:31px;color:#fff;text-align:center;padding-top:30px;">SEATS ARE FILLING UP FAST! 
</td> 
</tr> 

<tr> 
<td align="center" cellpadding="0" cellspacing="0" style="border-collapse:0px;"> 
<a href="http://www.isgtreg.com"><img src="button2.jpg" alt="Register" height="48" width="312" style="border:0px;vertical-align:top;"/></a> 
</td> 
</tr> 

<tr> 
<td style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:17px;color:#fff;text-align:center;padding-top:10px;padding-bottom:20px;">For more information on programs<br />and speakers, visit <span style="font-family:Arial, Helvetica, sans-serif;font-size:15px;font-style:italic;line-height:17px;color:#fff;"><a href="http://www.ieee-isgt.org" style="color:#fff;text-decoration:none;">www.ieee-isgt.org</a></span> 
</td> 
</tr> 
</table> 

<!--Footer--> 
<table height="auto" width="600" border="0" align="center" style="margin-top:5px;"> 

<tr> 
<td height="auto" width="auto" align="center" style="background-color:#e5e4e4; padding-top:10px; padding-right:30px; padding-bottom:10px; padding-left:30px;"> 
<p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:17px;font-weight:bold;color:#3e3e3e;text-align:left;">ISGT 2013 conference co-sponsoring societies include IEEE-USA, IEEE Dielectrics and Electrical Insulation Society, IEEE Industry Applications Society, IEEE Industrial Electronics Society, IEEE Power Electronics Society, IEEE Systems Council and IEEE Signal Processing Society.</p> 
</td> 
</tr> 


<!--Unsubscribe--> 
<tr> 
<td height="40" width="600" align="center"> 
<p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:14px;font-weight:normal;color:#141313;text-align:center;">If you no longer wish to receive these types of messages from IEEE PES Media,<br />please <a href="/" style="color:#168116;text-decoration:none;">click here</a> or fax 703-860-1623, or write 445 Hoes Lane, Piscataway, N.J. 08854.</p> 
</td> 
</tr> 
</table> 

</body> 
</html>

How it should look...

這是它出現在瀏覽器作爲一個HTML文件，這是我怎麼想出現在每個實例中。如果任何人都可以宣佈我缺少的東西，我會非常感激。

來源

2013-01-22 usefulbattery

+1

一個評論：當你在電子郵件中使用的圖像，你應該使用完整路徑。另外，你可以發佈整個HTML嗎？ – gSaenz

+0

更新完整的電子郵件。 – usefulbattery

+1

@DanKanze但這是HTML電子郵件。對於這些東西，它仍然是1999 – graham

回答

1 
<style> 
.content span{color:green;} 
</style> 
<table> 
    <tr> 
     <td> 
      <img src="topleft_background.png"/> 
     </td> 
     <td>  
      <ul class="content"> 
      <li><span>Green Text:</span> Regular text.</li> 
      <li><span>Green Text:</span> Regular text.</li> 
      <li><span>Green Text:</span> Regular text.</li> 
      <li><span>Green Text:</span> Regular text.</li> 
      </ul> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <img src="bottomleft_background.png"/> 
     </td> 
     <td>  
      <img src="bottomright_background.png"/> 
     </td> 
    </tr> 
</table>

來源

2013-01-22 16:43:57

+0

這讓我擺脫了我的一張桌子，這是有幫助的，但風格並沒有傳遞給所有瀏覽器。 – usefulbattery

+0

然後使用內聯樣式。 –

+0

@ user2000978做了這項工作？ – graham

0

我可以建議mailrox.com

做所有這類事情你。

編輯：

試試這個：

<html style="width: 100%; margin-top: 0px !important; padding-top: 0px !important;"><head> 



    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title></title> 
</head><body style="width: 100%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: normal; word-spacing: 0px; text-shadow: none; color: #000000; font-size: 13px; line-height: 17px; background-color: #FEFEFE; margin: 0px 0 0 0px; padding: 0px 0 0;" bgcolor="#FEFEFE"><table width="100%" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0px; background-color: #FEFEFE; margin: 0px; padding: 0px; border: 0px none;" bgcolor="#FEFEFE"> 
    <tbody> 
     <tr align="center" style="border-collapse: collapse; border-spacing: 0px; border: 0px none;"> 
      <td valign="top" align="center" style="border-collapse: collapse; border-spacing: 0px; border: 0px none;"> 
       <table width="603" cellspacing="0" cellpadding="0" border="0" align="center" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px; border: 0px none;"> 
        <tbody> 
          <tr align="left" style="border-collapse: collapse; border-spacing: 0px; border: 0px none;"> 
           <td width="603"> 
            <table width="603" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0px; margin-top: 0px !important; padding-top: 0px !important; border: 0px none;"> 
             <tbody> 
              <tr align="left" style="border-collapse: collapse; border-spacing: 0px; border: 0px none;"> 
               <td width="603"> 
                <table width="603" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0px; margin-top: 0px !important; padding-top: 0px !important; border: 0px none;"> 
                 <tbody> 
                  <tr style="border-collapse: collapse; border-spacing: 0px; height: 20px; border: 0;"><td width="603" valign="top" height="20" align="left" style="background-color: #FEFEFE;" bgcolor="#FEFEFE"><img width="1" height="20" style="display: block; line-height: 1; opacity: 0; padding: 0px; border: 0;" src="images/clear.gif" alt=""></td> 
                  </tr> 
                 </tbody> 
                </table> 
               </td> 
              </tr> 
             </tbody> 
            </table> 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </td> 
      </tr> 
    </tbody> 
</table> 
<table align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0; background-color: #FEFEFE; margin: 0px 0 0; padding: 0px 0 0; border: 0;" bgcolor="#FEFEFE"><tbody><tr align="center" style="border-collapse: collapse; border-spacing: 0; border: 0;"> 
         <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; border: 0;"> 
          <table width="603" align="center" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin: 0px 0 0; padding: 0px 0 0; border: 0;"> 
           <tbody> 
             <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0;"> 
     <td width="603"> 
      <table width="603" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin-top: 0px !important; padding-top: 0px !important; border: 0;"> 
       <tbody> 
        <tr style="border-collapse: collapse; border-spacing: 0; border: 0;"><td width="242" height="376" align="left" valign="top" style=""> 


      <img height="376" src="images/image-268344-530390.jpg" style="display: block; line-height: 1; padding: 0; border: 0;" width="242"> 

</td> 
<td width="361" align="left" valign="top"> 
    <table width="361" align="center" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin: 0px 0 0; padding: 0px 0 0; border: 0;"> 
     <tbody> 
       <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0;"> 
     <td width="361"> 
      <table width="361" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin-top: 0px !important; padding-top: 0px !important; border: 0;"> 
       <tbody> 
        <tr style="border-collapse: collapse; border-spacing: 0; border: 0;"><td width="361" height="257" align="left" valign="top" style=""> 


      <table height="auto" width="357" cellspacing="0" align="center" style="vertical-align:top;border-collapse:0px;float:right;display:inline;"> 


<!-- Bullet 1--> 

<tbody><tr> 
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;border-collapse:0px;">•</td> 

<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">RESULTS:</span>Learn about real-practice technology, deployment experience, and customer acceptance issues related to smart grid.</td> 
</tr> 


<!-- Bullet 2--> 
<tr> 
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">•</td> 

<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">NETWORKING:</span>Meet and speak directly with industry leaders, regulators and entrepreneurs working with the smart grid.</td> 
</tr> 

<!-- Bullet 3--> 
<tr> 
<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;text-align:left;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">•</td> 

<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">OPPORTUNITY:</span>International speakers will report on real success stories and pitfalls – as well as current business.</td> 
</tr> 

<!-- Bullet 4--> 
<tr> 

<td height="auto" width="8" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:left;font-weight:bold;text-align:left;vertical-align:top;padding-top:10px;border-collapse:0px;">• </td> 

<td height="auto" width="311" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;color:#141313;float:right;text-align:left:10px;padding-top:10px;padding-right:30px;"><span style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;font-weight:bold;color:#168116;text-align:left;margin-right:3px;">RESEARCH:</span>Noted academics and practitioners talk candidly about their work in making smart grid a cost-effective proposition.</td> 
</tr> 

</tbody></table> 

</td> 
</tr>     
       </tbody> 
      </table> 
     </td> 
    </tr> 
    <tr align="left" style="border-collapse: collapse; border-spacing: 0; border: 0;"> 
     <td width="361"> 
      <table width="361" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin-top: 0px !important; padding-top: 0px !important; border: 0;"> 
       <tbody> 
        <tr style="border-collapse: collapse; border-spacing: 0; border: 0;"><td width="361" height="119" align="left" valign="top" style=""> 


      <img height="119" src="images/image-268346-530393.jpg" style="display: block; line-height: 1; padding: 0; border: 0;" width="361"> 

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

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

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

<style type="text/css"> 
body { width: 100% !important; margin-top: 0px !important; padding-top: 0px !important; } 
body { background-color: #FEFEFE !important; margin-top: 0px !important; padding-top: 0px !important; font-family: sans-serif !important; } 
body { letter-spacing: normal !important; word-spacing: 0px !important; margin-top: 0 !important; padding-top: 0 !important; margin-right: 0 !important; padding-right: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; margin-left: 0 !important; padding-left: 0 !important; text-shadow: none !important; color: #000000 !important; font-size: 13px !important; line-height: 17px !important; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; } 
</style> 




</body></html>

來源

2013-01-22 17:09:09 DickieBoy

+0

感謝您的幫助DickieBoy，但在PC筆記本電腦上向Firefox中的電子郵件客戶端發送測試時仍然存在相同的問題...但不是在Mac桌面上。 – usefulbattery

+0

我會看看你的子彈表，周圍的一切都是完美的。 以下是我想嘗試的： 修復所有高度，將汽車取出。 刪除垂直對齊。和任何利潤（使用兄弟姐妹td的寬度） 當你說Firefox？你的意思是雷鳥？ – DickieBoy

相關問題

 相關問題