时事通讯电子邮件 - 找不到我的代码有什么问题。 Dreamweaver 中也没有错误

Newsletter email - can't find what's wrong with my code. No errors in Dreamweaver either

当我预览此内容时 table 在 700 像素之外爆炸。我确定这很简单,就像缺少标签一样,但我检查了一个小时并进行了一些更改,但问题仍然存在。 Dreamweaver 程序也没有显示任何错误。 在此先感谢您的帮助。

使用内联工具后,这是新的代码。同样的问题仍然存在。看起来像是填充问题,但我不确定。

<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ezTaxReturn.com Newsletter</title>
<!-- Targeting Windows Mobile --><!--[if IEMobile 7]>
    <style type="text/css">

    </style>
    <![endif]--><!-- ***********************************************
    ****************************************************
    END MOBILE TARGETING
    ****************************************************
    ************************************************ --><!--[if gte mso 9]>
        <style>
        /* Target Outlook 2007 and 2010 */
        </style>
    <![endif]-->
</head>
<body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 0; width: 100% !important">
<style type="text/css">
body {
width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass {
line-height: 100%;
}
#backgroundTable {
margin: 0; padding: 0; width: 100% !important; line-height: 100% !important;
}
h1 a:active {
color: red !important;
}
h2 a:active {
color: red !important;
}
h3 a:active {
color: red !important;
}
h4 a:active {
color: red !important;
}
h5 a:active {
color: red !important;
}
h6 a:active {
color: red !important;
}
h1 a:visited {
color: purple !important;
}
h2 a:visited {
color: purple !important;
}
h3 a:visited {
color: purple !important;
}
h4 a:visited {
color: purple !important;
}
h5 a:visited {
color: purple !important;
}
h6 a:visited {
color: purple !important;
}
@media only screen and (max-device-width: 480px) {
  a[href^="tel"] {
    text-decoration: none; color: blue; pointer-events: none; cursor: default;
  }
  a[href^="sms"] {
    text-decoration: none; color: blue; pointer-events: none; cursor: default;
  }
  .mobile_link a[href^="tel"] {
    text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
  }
  .mobile_link a[href^="sms"] {
    text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
  }
  #navigation {
    display: none;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  a[href^="tel"] {
    text-decoration: none; color: blue; pointer-events: none; cursor: default;
  }
  a[href^="sms"] {
    text-decoration: none; color: blue; pointer-events: none; cursor: default;
  }
  .mobile_link a[href^="tel"] {
    text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
  }
  .mobile_link a[href^="sms"] {
    text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
  }
}
</style>
<table class="newsletter-table" id="backgroundTable" style="background: #ebebeb; border-collapse: collapse; line-height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important" border="0" cellpadding="0" cellspacing="0" bgcolor="#ebebeb"><tbody><tr><td valign="top" style="border-collapse: collapse">
<!-- PRE -->
<table class="pre" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt"><tbody><tr>
<td style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 10px; line-height: 14px; padding: 20px 0 0" align="center">The September 2015 customer newsletter is sent as a courtesy from ezTaxReturn.com.<br><a href="#" style="color: #333333; font-weight: bold">View Online in Browser.</a> If you prefer not to receive email from us, <a href="%7B%7B%7Bunsubscribe%7D%7D%7D" style="color: #333333">click here to unsubscribe.</a><br><br>
</td>
</tr></tbody></table>
<!-- END PRE --><!-- HEADER START --><table class="hero" style="border-collapse: collapse; font-family: Arial,Helvetica; font-size: 12px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 700px" border="0" cellpadding="0" cellspacing="0" align="center"><tbody align="center">
<tr>
<td data-description="Orange Bar" style="background: #fb7016; border-collapse: collapse; line-height: 0px" colspan="2" align="center" bgcolor="#fb7016"><img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/01/orange-5x5.gif" height="5" width="5" alt="line"></td>
</tr>
<tr>
<td style="background: #ffffff; border-collapse: collapse" width="350" bgcolor="#ffffff"><a href="http://www.eztaxreturn.com" target="_blank" style="color: orange"><img alt="ezTaxReturn.com - The fastest way to get the biggest fund." src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/ezTaxReturnLogo.jpg" width="100%" style="border: none"></a></td>
<td style="background: #ffffff; border-collapse: collapse" bgcolor="#ffffff">
<font style="color: #fb7016">SEPTEMBER NEWSLETTER</font>
</td>
</tr>
</tbody></table>
<table id="Table_01" width="700" height="367" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr>
<td colspan="2" style="border-collapse: collapse">
<a href="http://www.eztaxreturn.com/" target="_blank" style="color: orange">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/NewsletterSeptember15-Header_012.jpg" width="700" height="280" border="0" alt="Still haven't filed your taxes? No problem." style="border: none"></a>
</td>
</tr>
<tr>
<td style="border-collapse: collapse">
<a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/offers_plan.html" target="_blank" style="color: orange">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/NewsletterSeptember15-Header_022.jpg" width="351" height="88" border="0" alt="Save time and money. Pre-register for next year." style="border: none"></a>
</td>
<td style="border-collapse: collapse">
<a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/post_comments.html" target="_blank" style="color: orange">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/NewsletterSeptember15-Header_032.jpg" width="350" height="88" border="0" alt="We care. Share your filing experience." style="border: none"></a>
</td>
</tr>
</table>
</td></tr></tbody></table>
<!-- HERO END --><!-- CONTENT --><table cellpadding="0" cellspacing="0" border="0" align="center" style="background: #ffffff; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="700px" bgcolor="#ffffff">
<tr>
<td valign="top" style="border-collapse: collapse">
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="385">
<tr><td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 20px 0px 0px 40px" valign="top">TAX TALK, NEWS &amp; INSIGHTS</td></tr>
<tr>
<td valign="top" style="border-collapse: collapse; color: #000; font-family: Arial, Helvetica; font-size: 12px; padding: 25px 20px 20px 40px">
<a href="http://blog.eztaxreturn.com/2015/08/review-your-taxes-now-to-prevent-a-surprise-next-spring/" style="color: #000; font-size: 14px; font-weight: bold; text-decoration: none">Review your taxes now to prevent<br>a surprise next spring</a><br>
Don’t let tax time fool you. Some people are overjoyed<br>to receive a big refund at tax time...
<a href="http://blog.eztaxreturn.com/2015/08/review-your-taxes-now-to-prevent-a-surprise-next-spring/" style="color: #fb7016; text-decoration: none">[READ MORE]</a><br><br><a href="http://blog.eztaxreturn.com/2015/08/furthering-your-education-has-tax-benefits/" style="color: #000; font-size: 14px; font-weight: bold; text-decoration: none">Furthering your education<br>has tax benefits</a><br>
Enjoy the rest of your summer while you can, school will<br>be back in session before you know it... <a href="http://blog.eztaxreturn.com/2015/08/furthering-your-education-has-tax-benefits/" style="align: right; color: #fb7016; text-decoration: none">[READ MORE]</a>
<br><br><a href="http://blog.eztaxreturn.com/2015/08/6-tips-for-exercising-safely-in-the-summer-heat/" style="color: #000; font-size: 14px; font-weight: bold; text-decoration: none">6 tips to exercise safely in the summer heat</a><br>
Summer’s the perfect time to get off the couch and<br>engage in outdoor activities... <a href="http://blog.eztaxreturn.com/2015/08/6-tips-for-exercising-safely-in-the-summer-heat/" style="color: #fb7016; text-decoration: none">[READ MORE]</a>
<br><br><a href="#" style="color: #000; font-size: 14px; font-weight: bold; text-decoration: none">Easy ways to keep your home safe<br>while you travel</a><br>
Imagine returning from the vacation of a lifetime to find<br>your home ransacked... <a href="#" style="color: #fb7016; text-decoration: none">[READ MORE]</a>
<br><br><a href="#" style="color: #000; font-size: 14px; font-weight: bold; text-decoration: none">Did you file a tax extension?<br>The clock is ticking...</a><br>
April 15th has come and gone but the tax season hasn’t ended for nearly 13 million people... <a href="#" style="color: #fb7016; text-decoration: none">[READ MORE]</a>
<br>
</td>
</tr>
<tr><td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding-left: 40px" valign="top">TESTIMONIALS</td></tr>
<tr>
<td style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 12px; padding: 15px 0px 0px 40px">
<b>Therese P., AL</b>
</td>
</tr>
<tr>
<td colspan="2" style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 12px; padding-left: 40px">
I just used your wonderful site to file. Thank you, thank<br>you! Highly recommend you to all!!! I will definitely be<br>back next year! I'm so glad I found you. This was my<br>first time doing my own taxes. Thanks again for your<br>quick and helpful responses.
<br><a href="http://www.6.eztaxreturn.com/scriptsez/start.exe/eztax/testimonials.html" style="color: #fb7016; text-decoration: none">[READ MORE TESTIMONIALS]</a>
<p style="margin: 1em 0"></p>
<p style="margin: 1em 0"></p>
<p style="margin: 1em 0"></p>
</td>
</tr>
<tr>
<td style="border-collapse: collapse; padding: 2px 40px 20px 0px">
<a href="http://www.facebook.com/eztaxreturn" style="color: orange"><img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/01/like-facebook.gif" alt="Follow us on Facebook" align="right" border="0" style="border: none"></a>
</td>
</tr>
</table>
</td>
<td valign="top" style="border-collapse: collapse">
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse; border-left-color: #ccc; border-left-style: solid; border-left-width: 0px; font-family: Arial, Helvetica; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="300">
<tr>
<td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 20px 0px 0px" valign="top">
EZ LAUGHS
</td>
</tr>
<tr>
<td style="border-collapse: collapse">
<img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/08/jan2014_cartoon.gif" alt="Tax Humor" title="Tax Humor" width="290" height="288" border="0" style="padding: 40px 0px 54px">
</td>
</tr>
</table>
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr>
<td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 0px 20px 0px 0px; valign: top; width: 130px">
TAX TOOLS
</td>
<td style="border-collapse: collapse; color: #fb7016; font-family: Arial, Helvetica; font-size: 14px; line-height: 16px; padding: 0px 20px 0px 0px; valign: top">
BLOG
</td>
</tr>
<tr>
<td style="border-collapse: collapse; font-size: 12px; padding-top: 20px">
<a href="http://www.eztaxreturn.com/" style="color: #333333; font-family: Arial, Helvetica; text-decoration: none">Start a Return</a><br><a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/password_a.html?DownloadReturn=TRUE" style="color: #333333; font-family: Arial, Helvetica; text-decoration: none">Download a Return</a><br><a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/password_a.html?check_efile=TRUE" style="color: #333333; font-family: Arial, Helvetica; text-decoration: none">What's my ezStatus</a><br><a href="https://sa2.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp" style="color: #333333; font-family: Arial, Helvetica; text-decoration: none">Where's my Refund?</a>
</td>
<td style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 12px; padding-top: 20px">
Read more<br>
from our blog.<br><br><a href="http://www.eztaxreturn.com/scriptsez/start.exe/eztax/password_a.html?check_efile=TRUE" style="color: #fb7016; font-family: Arial, Helvetica; text-decoration: none">blog.eztaxreturn.com</a><br>
</td>
</tr>
<tr><td colspan="2" style="border-collapse: collapse; padding: 93px 0px 0px">
<a href="http://www.twitter.com/eztaxreturn" style="color: orange"><img src="http://blog.eztaxreturn.com/wp-content/uploads/2015/01/follow-twitter.gif" alt="Follow us on Twitter" border="0" align="left" style="border: none"></a>
</td></tr>
</table>
</td>
</tr>
<!-- END CONTENT --><!-- FOOTER --><tr>
<td style="border-collapse: collapse">
<table class="post" cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse; font-family: Arial, Helvetica; font-size: 11px; line-height: 16px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="700"><tr>
<td style="border-collapse: collapse; color: #666666; padding: 25px 0" align="center">This email was sent to <a href="mailto:%7B%7B%7Bemail_address%7D%7D%7D" style="color: orange">{{{email_address}}}</a>.<br><a href="%7B%7B%7Bunsubscribe%7D%7D%7D" style="color: #666666">Click Here To Unsubscribe</a><br> Copyright 2015 ezTaxReturn.com, LLC | 100 Ring Road West | Garden City, NY 11530<br> All rights reserved.</td>
</tr></table>
</td>
</tr>
<!-- END FOOTER --><!-- End of wrapper table -->
</table>
</body>
</html>
<head> 中的

CSS 通常会被呈现 HTML 电子邮件的电子邮件客户端忽略。

安全的做法是在每个标签上使用 style= 属性应用 CSS。幸运的是,您可以利用现有的资源,使用免费的 online service to create your final HTML. There are several other options 将 CSS 应用于每个 HTML 元素。

table 布局和通常的嵌套存在多个问题。此外,"px" 在 HTML width 属性中。这是一个至少在 Chrome 中显示良好的补丁版本。这是进一步清理代码的良好起点。我不打算进一步渲染测试它,因为这是一个提问网站,问题是为什么代码 "exploding"。好吧,下面的代码不再 "explode"(至少在最新的 Chrome 中):

JSFiddle