Outlook not aligning 2 images but other browsers are

问题

I am trying to make a html email, it works in all browsers except outlook.

I have created two rows on a table, with each row has an image, but there is a white space showing between the image.

 <td colspan="2"><img style="display:block" src="images/greenTop02.gif" width="595" height="8" /></td>

Full html code : http://jsfiddle.net/eNKxp/2/

回答1:

Try this conditional CSS:

<!--[if gte mso 9]>
<style type="text/css">
table {
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}
table td {
border-collapse:collapse !important;
border:none !important;
mso-border-alt:0 !important;
}
</style>
<![endif]-->

<!--[if gte mso 15]>
<style type="text/css">
table {
font-size:1px;
mso-line-height-alt:0;
line-height:0;
mso-margin-top-alt:1px;
}
</style>
<![endif]-->

回答2:

Add table td { border-collapse:collapse;} to your head and declare all your tables like this:

<table border="0" cellspacing="0" cellpadding="0">

回答3:

Set the height of your <td>'s the same as the height of your image. In the image tag, include this: style="margin: 0; border: 0; padding: 0; display: block;"

Note that these gaps are unavoidable when someone from outlook forwards your email to someone else. I'd suggest combining your images, or better still, separating the text from the images as it will be unreadable by default in most clients.

Here is an example. This will also prevent separation in Outlook as the image is vertically sliced:

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="3cb878">
  <tr>
    <td width="450" height="30">
      <img alt="" src="" width="450" height="30" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="150" rowspan="2">
      <img alt="" src="" width="150" height="150" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
  <tr>
    <td width="450" height="120" style="font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 18px; color: #FFFFFF; padding-left:20px; font-weight:bold;">
Put your text in here...<br>...<br>...<br>...
    </td>

  </tr>
</table>

来源：https://stackoverflow.com/questions/21025156/outlook-not-aligning-2-images-but-other-browsers-are

标签

html

html5

html-table

html-email