Question

我已经在html中为电子邮件创建了一个表格（仅供参考，这不是垃圾邮件，而是在我工作的组织内部使用）。 CSS几乎是不可能的，因为我们使用Outlook和Office 2007（它不会正确渲染CSS - 在这方面没有任何效果）。我有两个并排的单元格 - 一个有背景图像，文字在顶部，另一个有使用我创建的h1标签的ttile。

问题：当我在与背景图片相邻的单元格中输入2行标题时，底部的间距太大，背景图片垂直复制其中的一部分（即使相邻文本中的文本）细胞不大于pic）。我试图指定填充，但它不会改变任何东西。

我对h1标签的规则如下所示：

td.leftCol h1 {
color: #003152;
font-size: 0.9em;
}

有问题的单元格的代码是：

<tr bgcolor="#FFFFFF">
<td width="150px" height="42px" class="leftCol" background="/news/newsletters/images/leftcol_box.gif" align="right"><font color="#FFFFFF"><strong>Text&nbsp;&nbsp;</strong></font></td>
<td width="298px" class="leftCol" style="padding: 5px 0px 0px 0px;"><h1>New Medical School in New Brunswick</h1></td>
</tr>

有什么建议吗？

Answer 1

不幸的是，至少Outlook 2007忽略了所有background related CSS-Tags，根据我的经验，渲染边距/填充完全不同。

尝试在Word中创建HTML，如果可能的话，至少Outlook07-10和Word共享相同的渲染引擎：）

Answer 2

如果所有行都有相同的图像，请将其放在css类中，如下所示

background-image: url("http://yoursite/news/newsletters/images/leftcol_box.gif");

background-repeat: no-repeat;

文本间距表格单元格

2 个答案: