兼容旧浏览器：如何减少表格<tr>标签间距并消除Outlook背景黑线

嗨，Alex！我来帮你搞定这两个旧浏览器和Outlook里的常见问题，咱们一步步来解决：

一、减少两行文本的间距 #

你现在的文本间距过大，主要是表格默认的单元格内边距以及<tr>的默认行高导致的，咱们可以通过两种方式调整：

方法1：优化原有多结构

直接修改表格属性和单元格内边距，保留你原来的行结构：

<table style="background-color: cadetblue; width:100%; padding:10px; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <!-- 把rowspan从3改成2，避免多余空白行 -->
    <td rowspan="2" width="130" style="padding: 0; vertical-align: middle;">
      <!-- 用padding-left替代transform，兼容更旧的浏览器 -->
      <img src="Images/facebook.png" height="80" width="80" style="padding-left: 2em;" class="logo" />
    </td>
    <td class="name1" style="padding: 0 0 5px 0;">This is some text</td>
  </tr>
  <tr>
    <td class="name2" style="padding: 0;">This is some text1</td>
  </tr>
</table>

<style>
.name1 {
  font-size: 25px;
  color: #e9c46a;
}
.name2 {
  font-size: 25px;
  color: white;
}
</style>

• 给表格添加border="0" cellpadding="0" cellspacing="0"和border-collapse: collapse，清除默认的表格间距
• 给文本所在单元格设置padding，通过调整name1的底部padding值（比如示例里的5px），就能自由控制两行文本的间距
• 替换transform为padding-left，因为旧浏览器（比如IE8）不支持CSS3的transform属性

方法2：合并文本到同一单元格（更灵活）

如果想更精准控制间距，把两个文本放到同一个单元格里，用<div>包裹后直接设置margin：

<table style="background-color: cadetblue; width:100%; padding:10px; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="130" style="padding: 0; vertical-align: middle;">
      <img src="Images/facebook.png" height="80" width="80" style="padding-left: 2em;" class="logo" />
    </td>
    <td style="padding: 0;">
      <div class="name1" style="margin: 0 0 5px 0;">This is some text</div>
      <div class="name2" style="margin: 0;">This is some text1</div>
    </td>
  </tr>
</table>

<style>
.name1 {
  font-size: 25px;
  color: #e9c46a;
}
.name2 {
  font-size: 25px;
  color: white;
}
</style>

这种方式结构更简洁，调整margin-bottom的数值就能直接控制两行的间距，上手更简单。

二、消除Outlook里的背景黑线 #

Outlook桌面版会自动给表格添加默认边框，解决这个问题只需要两步：

1. 在<table>标签里强制添加border="0"属性
2. 给表格设置内联样式border-collapse: collapse;（Outlook对外部CSS支持差，内联写更保险）

上面的示例代码已经包含了这两个设置，只要确保这两点，就能彻底去掉那些烦人的黑线啦。

备注：内容来源于stack exchange，提问作者Alex