Question

我在创建一些HTML电子邮件时遇到问题，无法在Outlook桌面2013中正确显示，到目前为止，我已经设法解决了我所有的问题，这个边界问题我不能解决理解。

基本上在outlook网络应用中，我的表看起来像这样： http://imgur.com/EqbluKF

但在Outlook 2013上它看起来像这样： http://imgur.com/s1ZQRqW

这是我的表格代码在展望之前吃掉它并使这个混乱：

<table cellspacing="0" cellpadding="1" border="0" align="center" width="100%" style="margin:auto;">
<thead>
    <tr height="40" style="background-color: #CFE1D3; ">
        <th align="center" width="17%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('Item') ?></strong></th>
        <th align="center" width="17%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('Product Code') ?></strong></th>
        <th align="center" width="30%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('Product Description') ?></strong></th>
        <th align="center" width="10%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 1px 0 1px;"><strong><?php echo $this->__('Quantity') ?></strong></th>
    </tr>
</thead>
<tbody>
   <tr>
     <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;"><img src="images/product"  alt="test" width="100%" height="auto" align="left" /></td>
     <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;">test</td>
     <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;">This is a test</td>
     <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-top-width: 0;">1</td>
   </tr>
</tbody>

Answer 1

我在搜索答案时很快就遇到了这个问题，但其他答案都没有对我有用。

在我的情况下，答案是在我的distinct上使用以下内联样式：

<table>

Answer 2

您是否尝试将border-collapse: collapse添加到表格的样式属性中？基本上，Outlook假设表格单元格的边界不应重叠，除非被告知。

Answer 3

尝试在border-color：#777777上使用6位十六进制颜色代码，不同客户端不完全支持3位十六进制代码，您会发现它们之间的颜色可能会发生变化。（如果你使用6位数字，它将在所有内容中保持一致，所以试着把它作为习惯）。

Litmus blog on this

您还应在所有图片代码中添加style="display:block";。

Outlook在桌子上改变边界css

3 个答案: