HTML Email Browser兼容性问题

时间：2013-01-22 16:32:46

标签： html image html-table html-email

我正在编写一封我正在编码的电子邮件的问题，但我无法找到答案。在浏览器中查看HTML文件时，我的区域显得正常，但GMail和Firefox和IE等浏览器都会导致一些问题。对齐被搞砸了，图像没有放在正确的位置等等。我认为我遇到的问题是在某些浏览器中我的右栏有文字被推到我的子弹列下面。我想知道是否有任何可以在我的代码中找到一些可能对我有帮助的缺陷。这是给我带来麻烦的部分：

<!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文件，这就是我希望它出现在每个实例中的方式。如果有人能发出一些我想念的东西，我会非常感激。

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：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>
相关问题
最新问题