0

我正在尝试创建一个“证书”以用于电子邮件 capmaign。我们试图保持与 Outlook 2007 的兼容性，这限制了我们使用背景属性来仅加载单个图片以显示在文本后面。

我已将边框切成 4 块（左、上、右、下）并将它们放置在跨列和跨行中，但无法使它们正确排列。基于此代码的任何建议？

<!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>Special Offer from Toyota/Scion of Clifton Park</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-style: italic;
}
.style4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.style8 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #666666;
}
.style9 {color: #666666}
.style10 {color: #000000}

}
-->
</style>
</head>

<body>
<table width="610" height="984" border="0" cellspacing="0" cellpadding="0">
  <tr></tr>


  <tr>
  <td width="74" rowspan="11"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" align="top" /></td>
  <td colspan="5"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="461" height="171" align="left" /></td>
  <td width="87" rowspan="11"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" align="bottom" /></td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
  </tr>

  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>

  <tr>
  <td colspan="5">&nbsp;</td>
</tr>

  <tr>
  <td colspan="5">&nbsp;</td>
</tr>

  <tr>
  <td width="90">&nbsp;</td>
  <td width="90">&nbsp;</td>
  <td width="90">&nbsp;</td>
  <td width="90">&nbsp;</td>
  <td width="91">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5"><div align="center">
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4"><span class="style8"><br/> 
      </span><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="466" height="63" align="top" /><br />
    </p>
    </div></td>
</tr>
</table>

</body>
</html>
4

8 回答 8

1

感谢您的所有建议 - 帮助很大！如果你好奇的话，这就是我最终得到的结果。在浏览器中预览错误，但在接收端的电子邮件客户端中正确显示。我成功测试了 Gmail、Outlook 2000/2007、Yahoo（旧/新）、Hotmail、Thunderbird。

还在电子邮件http://www.campaignmonitor.com/css/中找到了 CSS 指南 （如果发送到 Outlook 2007/2010 和 Gmail 客户端，基本上避免使用它）

    <!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>Untitled Document</title>
</head>

<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: #FFF;
    text-align: left;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body table tr td {
    font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<table width="600" height="984" border="0" cellspacing="0" cellpadding="0" font-family: Arial, Helvetica, sans-serif;>    
<tr>
<td valign="top" width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" /></td>

<td valign="top"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" /></td>

<td valign="top" width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" /></td>
</tr> 
<tr>
<td>
  <p align="center"><font size="+1"> <strong>Special Introductory Maintenance Offer for:</strong></font></p>
  <p align="center"><em>Insert Name<br />Insert Vehicle<br />Insert Vin#<br />Insert Delivery Date</em></p>
  <p align="center"><strong>First 5,000 Miles / 6 Months <br /> Maintenance Service<br />$29.95<br /><font size="-4">(a $79.95 value)<br/><br/><font size="-1">to include:<br /></strong></p>
    <ul>
    <li><div align="left">Inspect and top off washer fluid, brake fluid, <br />
        power steering fluid, and coolant level</div></li>
    <li><div align="left"><font size="-1">Set tire pressures and rotate tires</div></li>
    <li><div align="left">Thorough tire inspection for abnormal wear or damage</div></li>
    <li><div align="left">Inspect wiper blades</div></li>
    <li><div align="left">Replace engine oil and filter</div></li>
    <li><div align="left">Reset maintenance indicator </div></li>
    </font>
    </ul>

  <p align="left"><font size="-1"><span>Toyota of Clifton Park would like to <strong>Thank You</strong> for  your vehicle purchase. We have taken time in caring for and preparing  your vehicle before your purchase and would like to continue that same  care throughout your ownership. I personally invite you to take  advantage of the above offer for your first full Toyota scheduled  maintenance in our Award winning service department. The initial &quot;break  in&quot; inspection is crucial to the safety and longevity of your new  investment.<br /><br />
    Our call center will be following up with you as a reminder when the time gets close. If you have any questions or concerns please don't  hesitate to call the service department at 518-664-4444. Any one of our associates can answer your questions. We truly appreciate your business and look forward to seeing you soon.</span></font></p>

<p align="center"><span>Thank You, <br />Jason Halliday, Service Manager<br />Toyota / Scion of Clifton Park<br /><font size="-3"><em><br /><br />Certificate expires 6 months from delivery date or <br />5,000 miles, whichever comes first.<br />Applicable sales tax not included.<br />Certificate not transferable, valid only for the above customer and vehicle.<br /> NC OPCODE FSCERT<br /></em></font></span></p>
</td>     
</tr>
<tr>
<td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63"/></td>     
</tr>
</table>
</body>
</html>
于 2009-08-10T01:07:21.207 回答
0

您所有的中间列单元格的高度都是可变的（不是固定的），因此浏览器只会尝试将它们调整到它认为最好的高度。

您需要使用 style 属性来修复它们的高度，如下所示：

<td style="height: 171px;">

这将适用于包含顶部图像的单元格，因为图像的高度为 171 像素。

另外：中间需要9行吗？或者你有没有尝试过定位边界？

编辑：或者 Re0sless 所说的。;D

于 2009-08-08T16:11:28.620 回答
0

您可以通过将 valign="top"和 valign="bottom"添加到表格顶部和底部的中心单元格来完成此操作。

像这样：

<tr>
  <td width="74" rowspan="11"><img src="left_image2.jpg"  width="70" height="984" align="top" /></td>
  <td colspan="5" valign="top"><img src="top_image3.jpg" width="461" height="171" align="left" /></td>
  <td width="87" rowspan="11" ><img src="http:right_image2.jpg" border=0  width="71" height="984" align="bottom" /></td>
</tr>
......
<tr  valign="bottom">
于 2009-08-08T16:15:45.303 回答
0

我的建议：

  1. 将图像宽度设置为适当的值（顶部和底部为 459px 宽）。
  2. 将表格宽度设置为总值 (459 + 71 + 71 = 600)。
  3. 为底部图像创建一个单独的行，并将所有内容放在一个表格单元格中。如果需要，您可以在其中嵌套更多表格。


<table width="600" height="984" border="0" cellspacing="0" cellpadding="0">
    <tr>
       <td width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" align="top" /></td>
       <td><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" align="left" /></td>
       <td width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" align="bottom" /></td>
     </tr>
     <tr>
        <td>Put all your content in here.</td>
     </tr>
     <tr>
        <td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63" align="top" /></td>
     </tr>
</table>
于 2009-08-08T16:17:13.663 回答
0

...有几种方法可以修复它，一种（如果它可以在 Outlook 中工作并在所有其他邮件代理中显示）是将顶部和底部边框图像绝对定位在单元格中。

其次，我可能会重组表格。使顶部和底部边框跨越所有列，就好像它们从顶部和底部盖住桌子并从那里拿走一样。

于 2009-08-08T16:19:37.730 回答
0
  1. 将顶部中间单元格设置为垂直对齐顶部： .... top_image3.jpg ....

2. 剪切一个新图像用于底部，包括整个表格的左、中、右列，并将其放入 colspan="7" 的单元格中

于 2009-08-08T16:24:33.150 回答
0

确保在应用任何样式之前重置所有 CSS，以便边距和填充为 0。

于 2009-08-08T16:38:04.773 回答
0

在围绕这个问题寻找我自己对“使用图像作为边框的 HTML 表格”的要求之后，我找到了一个我在其他地方没有看到的解决方案。它在 tbody、tr 和 td 上使用单独的背景来达到预期的效果。这是 IE8 (CSS2) 兼容的解决方案：

table.table tbody {
      background-color: #dddddd;
}

table.table tbody tr td, table.table thead tr th {
    background-image: url('some-image.png');
    background-position: right;
    background-repeat: repeat-y;
}

table.table tbody tr {
    background-image: url('some-image.png');
    background-position: top;
    background-repeat: repeat-x;
}

CSS3 中的解决方案是使用多个背景：

table.table tbody tr td, table.table thead tr th {
      background-image: url('some-image.png'), url('some-image.png');
      background-position: top, right;
      background-repeat: repeat-x, repeat-y;
}

希望这对将来的某人有所帮助。

于 2013-08-21T10:00:11.800 回答