在Outlook中的表的一侧1px白色边框

时间：2014-06-16 08:33:51

标签： html css email outlook html-email

我有一个问题，即在Outlook 2007,2010和2013年的nemo图像右侧有一个小的1px边框，如下所示......

Outlook email issue

但是，这在任何其他电子邮件浏览器中都不会发生......这是我正在使用的HTML代码...... 

<div id="top" align="center" style="background:#fff400; background-color:#fff400;">

<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; width: 100%;" bgcolor="#FFFFFF" class="hide">

  <tbody><tr>
    <td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="20" width="1"></td>
  </tr>


  <tr>
    <td align="center" valign="top" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;">



   <table align="center" width="640" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; " bgcolor="#FFFFFF" class="table">

  <tbody><tr>
   <td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="1" width="20"></td>
    <td width="600" colspan="3" align="left" valign="top" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:12px;">
      Click <a href="#" style="color: #00000;">here</a> if you can't read this email
      </td>
      <td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="1" width="20"></td>
  </tr>
  </tbody></table>




    </td>
  </tr>


    <tr>
    <td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="20" width="1"></td>
  </tr>

</tbody></table>


<table align="center" width="640" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; " bgcolor="#FFF400" class="table">

  <tbody><tr>
    <td width="580" align="left" bgcolor="#fff400" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" width="1" height="15" style="display:block" border="0"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>


  <tr style="font-size:12px; font-family: Arial, Geneva, sans-serif; color:#000000;" align="left" valign="top">
    <td align="left" valign="top">
    <table class="table">
        <tbody>
            <tr>
                <td><a href="#" target="_blank"><img src="http://placekitten.com/172/115" width="172" height="115" alt="Alt Tag" style="display:block;" border="0" class="mob_img hide"></a></td>
                <td><a href="#" target="_blank"><img src="http://placekitten.com/406/115" width="406" height="115" alt="The 10 Minute Shake Up" style="display:block;" border="0" class="mob_img"></a></td>
            </tr>
        </tbody>
    </table>
    </td>
    </tr>

  <tr>
    <td><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" height="20" width="1"></td>
  </tr>

  <tr>
    <td align="left" valign="top">
        <table width="640" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; " bgcolor="#FFFFFF" class="table300">

  <tbody>
<tr>
    <td colspan="3"><span id="nemotopmobile"><img id="nemotop" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_08.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>
</tr>
    <tr>
    <td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="20" height="1" style="display:block" border="0"></td>
    <td align="right" valign="top">


    <table align="left" width="270" border="0" cellspacing="0" cellpadding="0" class="mob_left table300">
      <tbody><tr>
        <td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#00b3f0; font-size:24px; padding-top:10px;"><img src="http://placekitten.com/270/88" width="270" height="88" alt="" class="mob_img " style="display:block;" border="0"></td>
      </tr>
      <tr>
        <td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:20px; padding-top:10px;"><strong>Hello {Name},</strong></td>
      </tr>
       <tr>
         <td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="1" height="16" style="display:block" border="0"></td>
       </tr>
       <tr>
        <td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium mi vel magna rhoncus, et pulvinar mauris varius. Nullam tincidunt, ipsum in eleifend tincidunt, tortor turpis viverra turpis, vehicula facilisis dui arcu quis sem. Aenean tincidunt diam orci, eget feugiat ante gravida eu. Fusce venenatis mollis nisi eget vulputate. Vestibulum ut turpis eget urna tincidunt volutpat sed at lorem. Donec non neque eget mauris gravida fringilla.</td>
            <td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="10" height="16" style="display:block" border="0"></td>
      </tr>
       <tr>
         <td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="1" height="16" style="display:block" border="0"></td>
       </tr>
    </tbody></table>

    <table border="0" cellspacing="0" cellpadding="0" align="right" class="table" style="mso-table-rspace: 0pt; mso-table-lspace: 0pt;">
      <tbody><tr>
          <td align="right" valign="top"><span id="nemoswitch"><img src="http://design.datalateral.com\serco\73851\emails\emailOne/images/nemoDesktop_11.jpg" width="310" height="408" alt="Finding Nemo" id="nemo" class="mob_img" style="display:block;" border="0"></span></td>
      </tr>
    </tbody></table>



    </td>
  </tr>

  <tr>
      <td colspan="3"><span id="nemobottomswitch"><img id="nemoBottom" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_16.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>
</tr>

</tbody></table>
    </td>
  </tr>
</tbody>
</table>
</div>

Here is a link to the fiddle。我出错的任何想法？

感谢。

2 个答案:

答案 0 :(得分：1)

您在表格单元格中使用背景颜色。

要修复，只需将以下内容添加到嵌入式样式中：

table td { border-collapse: collapse; }

或者你可以内联添加它：

<td style="border-collapse: collapse;">... </td>

结帐post

答案 1 :(得分：0)

在您的表格中（您遇到问题），您使用了colspan =“3”。但是你的表只有两列。不知道为什么你添加了colspan =“3”。

更改此

 <td colspan="3"><span id="nemotopmobile"><img id="nemotop" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_08.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>

要

 <td colspan="2"><span id="nemotopmobile"><img id="nemotop" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_08.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>

对底行做同样的事情。

相关问题
最新问题