Outlook，gmail基本问题（导致代码）
Posted
技术标签:
【中文标题】Outlook，gmail基本问题（导致代码）【英文标题】：Outlook, gmail basic issue (caused the code) 【发布时间】：2012-06-04 10:39:18 【问题描述】：我在尝试创建我的第一个电子邮件模板设计时发现了问题，我认为它导致了代码（我对此很陌生）。
这是截图：
想知道为什么“博客文章”和“侧边栏”部分的宽度与上面的“表格部分”不同？
我使用的代码是这样的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mail 2</title>
<style type="text/css">
some style
</style>
<meta name="robots" content="noindex,nofollow">
<meta property="og:title" content="Mail 2">
</head>
<body leftmargin="0" topmargin="0" margin margin bgcolor="#ffffff">
<!--[if gte mso 9]>
<v:background fill="t">
<v:fill type="tile" src="https://lh5.googleusercontent.com/-6styRrYxl3U/T7Sg_Cbww0I/AAAAAAAAAkE/UWVWEJDfSj0/h120/header-bg.png" />
</v:background>
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table align="center" >
<tr>
<td>
This is above table section that shown correct
</td>
</tr>
</table>
<table >
<tr>
<td colspan="1" class="blog post">
This is below section that shown not correct as above. Blog post section that looks out of the box.
</td>
<td colspan="1" class="blog post">
<table>
</tr>
<td>
Blah blah. This is sidebar section that looks out of the box.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
【问题讨论】：
【参考方案1】：如果你只有两行两列，为什么要这么复杂？
<table border="0" cellspacing="2" cellpadding="0">
<tr>
<td>Content 1</td>
<td>Content 2</td>
</tr>
<tr>
<td>Content 3</td>
<td>Content 4</td>
</tr>
</table>
在每个“内容点”中放置您想要的任何内容并完成工作。你有太多的 td 和 tr，最好的做法是保持简单。我还建议为表格设置 596 像素而不是 100% 的宽度，因为这可能会导致某些电子邮件客户端出现显示问题。
【讨论】：
【参考方案2】：我注意到您的代码中有几个错误。
1.) 在底部第二张表中，您使用的是 </tr> 而不是 <tr>
2.) 顶部表格居中对齐，但底部没有对齐声明
3.) 在底部表格中，td 宽度加起来为 540，而不是声明的 600
我相信上述错误是导致问题的原因。如果没有，我需要更多信息来了解每个表中的确切内容，因为它可能是图像大小、嵌套表中的代码中的进一步错误等。
参见下面的代码 sn-p：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mail 2</title>
<style type="text/css">
some style
</style>
<meta name="robots" content="noindex,nofollow">
<meta property="og:title" content="Mail 2">
</head>
<body leftmargin="0" topmargin="0" margin margin bgcolor="#ffffff">
<!--[if gte mso 9]>
<v:background fill="t">
<v:fill type="tile" src="https://lh5.googleusercontent.com/-6styRrYxl3U/T7Sg_Cbww0I/AAAAAAAAAkE/UWVWEJDfSj0/h120/header-bg.png" />
</v:background>
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table align="center" >
<tr>
<td>
This is above table section that shown correct
</td>
</tr>
</table>
<table align="center" >
<tr>
<td class="blog post">
This is below section that shown not correct as above. Blog post section that looks out of the box.
</td>
<td class="blog post">
<table>
<tr>
<td>
Blah blah. This is sidebar section that looks out of the box.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>【讨论】：
以上是关于Outlook，gmail基本问题（导致代码）的主要内容，如果未能解决你的问题，请参考以下文章
display：inline-block not working outlook / gmail
表格边框未显示在Outlook桌面应用中，但在通过浏览器打开时在gmail和Outlook中可见
悬停在电子邮件模板中的 Gmail 和 Outlook 2007 中不起作用