Gmail中添加了一个空白，位于Outlook的html签名中 [英] A gap added in Gmail, inside a html signature from outlook
本文介绍了Gmail中添加了一个空白，位于Outlook的html签名中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个我需要在Outlook中使用的html签名。根据建议，我使用了表格布局，给定了所有图像，甚至td's，tr和表格本身的特定高度和宽度，0填充和边距，甚至尝试在css和旧式方式中添加这些实际的标签。
在Outlook中，它出现了正确的方式，但是在gmail中它增加了tr之间的差距。
按照这里的建议：显示图片之间的空白，我已经试图添加style =display：block;到图像，仍然没有运气。
下面是我使用的代码：
< table cellspacing =0pxcellpadding =0pxborder = 0pxwidth =592pxheight =254pxstyle =border-collapse：collapse; border：none; padding：0px; margin：0px; width：592px; height：254px;>
< tr cellspacing =0pxcellpadding =0pxwidth =592pxheight =90pxstyle =padding：0px; margin：0px; width：592px; height：90px;>
< td cellspacing =0pxcellpadding =0pxwidth =83pxheight =90pxstyle =padding：0px; margin：0px; width：83px; height：90px;>& amp ; NBSP;< / TD>
< td cellspacing =0pxcellpadding =0pxwidth =150pxheight =90pxstyle =padding：0px; margin：0px; width：150px; height：90px;><< ; img src =new_sig.files / sig2.pngwidth =150pxheight =90px>< / td>
< td cellspacing =0pxcellpadding =0pxwidth =359pxheight =90pxstyle =padding：0px; margin：0px; width：359px; height：90px;><< ; img src =new_sig.files / sig3.pngwidth =359pxheight =90px>< / td>
< / tr>
< tr cellspacing =0pxcellpadding =0pxwidth =592pxheight =64pxstyle =padding：0px; margin：0px; width：592px; height：64px;>
< td cellspacing =0pxcellpadding =0pxwidth =83pxheight =64pxstyle =padding：0px; margin：0px; width：83px; height：64px;><< ; a href =http://www.facebook.com>< img style =border：none; src =new_sig.files / sig4.pngwidth =83pxheight =64px>< / a>< / td>
< td cellspacing =0pxcellpadding =0pxwidth =150pxheight =64pxstyle =padding：0px; margin：0px; width：150px; height：64px;><< ; img src =new_sig.files / sig5.pngwidth =150pxheight =64px>< / td>
< td cellspacing =0pxcellpadding =0pxwidth =359pxheight =64pxstyle =padding：0px; margin：0px; width：359px; height：64px;><< ; img src =new_sig.files / sig6.pngwidth =359pxheight =64px>< / td>
< / tr>
< tr cellspacing =0pxcellpadding =0pxwidth =592pxheight =100pxstyle =padding：0px; margin：0px; width：592px; height：100px;>
< td cellspacing =0pxcellpadding =0pxwidth =83pxheight =100pxstyle =padding：0px; margin：0px; width：83px; height：100px;><< ; img src =new_sig.files / sig7.pngwidth =83pxheight =100px>< / td>
< td cellspacing =0pxcellpadding =0pxwidth =150pxheight =100pxstyle =padding：0px; margin：0px; width：150px; height：100px;><< ; img src =new_sig.files / sig8.pngwidth =150pxheight =100px>< / td>
< td cellspacing =0pxstyle =padding：0px 5px 0px 15px; margin：0px; width：339px; height：100px; line-height：16px; font-size：12px; color：＃4f4f4f ; FONT-FAMILY：宋体; >
姓名< br />
说明< br />< br />
< a href =http://www.site.comstyle =color：＃0875a4;> www.site.com< / a>
< img src =new_sig.files / phone_icon.pngwidth =18pxheight =28px/>
972-（0）3-6960556
< img src =new_sig.files / mail_icon.pngwidth =18pxheight =28px/>
< a href =mailto：name@site.comstyle =color：＃0875a4;> name@site.com< / a>
< / td>
< / tr>
< / table>
现在，代码gmail显然是这样写的：
< table width =592cellspacing =0cellpadding =0border =0style =width：444pt; border-collapse：崩溃;>
< tbody>
< tr style =min-height：67.5pt;>
< td width =83style =width：62.25pt; padding：0in; min-height：67.5pt;>
< p class =MsoNormal>< span style =font-size：12pt; font-family：& quot; Times New Roman& quot;，& quot; serif& quot ;; >&安培; NBSP;< /跨度>< / p为H.
< / td>
< td width =150style =width：112.5pt; padding：0in; min-height：67.5pt;>
< p class =MsoNormal>< span style =font-size：12pt; font-family：& quot; Times New Roman& quot;，& quot; serif& quot ;; >
< img height =90width =150src =>< / span>< span style =font-size：12pt; font-family：& quot; Times New罗马&安培; QUOT;，&安培; QUOT;衬线和安培; QUOT ;;>< /跨度>< / p>< / TD>
< td width =359style =width：269.25pt; padding：0in; min-height：67.5pt;>
< p class =MsoNormal>< span style =font-size：12pt; font-family：& quot; Times New Roman& quot;，& quot; serif& quot ;; >
< img height =90width =359src =>< / span>< span style =font-size：12pt; font-family：& quot; Times New罗马&安培; QUOT;，&安培; QUOT;衬线和安培; QUOT ;;>< /跨度>< / p>< / TD>< / TR>
< tr style =min-height：48pt;>
< td width =83style =width：62.25pt; padding：0in; min-height：48pt;>
< p class =MsoNormal>< a target =_ blankhref =http://www.facebook.com/>< span style =font-size：12pt; font-family：& quot; Times New Roman& quot;，& quot; serif& quot ;; color：blue; text-decoration：none;>
< img height =64width =83border =0src =>< / span>< / a>< span style =font-size：12pt; font-family：& quot; Times New Roman& quot;，& quot; serif& quot ;;>< / span>< / p>< / td>< td width =150 style =width：112.5pt; padding：0in; min-height：48pt;>< p class =MsoNormal>< span style =font-size：12pt; font-family：& quot; quot ; Times New Roman& quot;，& quot; serif& quot ;;>
< img height =64width =150border =0src =>< / span>< span style =font-size：12pt; font-family：& amp ; Times New Roman& quot;& quot; serif& quot ;;>< / span>< / p>< / td>
< td width =359style =width：269.25pt; padding：0in; min-height：48pt;>< p class =MsoNormal>< span style =font -size：12pt; font-family：& quot; Times New Roman& quot;，& quot; serif& quot ;;>
< img height =64width =359border =0src =>< / span>< span style =font-size：12pt; font-family：& amp ;" Times New Roman& quot;& quot; serif& quot ;;>>< / span>< / p>< / td>< / tr>
< tr style =min-height：75pt;>
< td width =83style =width：62.25pt; padding：0in; min-height：75pt;>
< p class =MsoNormal>< span style =font-size：12pt; font-family：& quot; Times New Roman& quot;，& quot; serif& quot ;; >
< img height =100width =83border =0src =>< / span>< span style =font-size：12pt; font-family：& amp ; Times New Roman& quot;& quot; serif& quot ;;>< / span>< / p>< / td>
< td width =150style =width：112.5pt; padding：0in; min-height：75pt;>
< p class =MsoNormal>< span style =font-size：12pt; font-family：& quot; Times New Roman& quot;，& quot; serif& quot ;; >
< img height =100width =150border =0src =>< / span>< span style =font-size：12pt; font-family：& amp ; Times New Roman& quot;& quot; serif& quot ;;>< / span>< / p>< / td>
< td width =339style =width：254.25pt; padding：0in 3.75pt 0in 11.25pt; min-height：75pt;>
< p style =line-height：12pt; < span style =font-size：9pt; color：rgb（79,79,79）;>姓名姓氏< br>描述< br>< br><目标=_ blankhref =http://www.site.com>
< img height =28width =18border =0src =>< / span>
< span style =font-size：9pt; color：rgb（79，79，79）;> 972-（0）3-6960556< / span>
< img height =28width =18border =0src =>< / span>
< a target =_ blankhref =mailto：name@site.com>
< / tbody>< / table>
我也试着让整个表格的行高为0，但那也行不通。
由于某些原因，最后一个单元格中的2个图像btw不会显示在gmail中。
更新：直到现在还没有真正注意到这个问题得到了更多的答案。我们最终简化了设计/代码，并在一段时间后停止检查此页面。不知道这里的解决方案是否有效，但我看到他们帮助了其他人。 thnx反正：）
解决方案
对于只包含图像的表格单元格，将行高设置为0
< td style =line-height：0>< img ... />< / td>
（Email On Acid是一个不错的提示。）
I've created an html signature I need to use in Outlook. Following recommendations, I've used a table layout, given all images and even td's, tr's and the table itself specific height and width, 0 padding and margin, and even tried adding those in both css and in the old-fashion way on the actual tags.
In outlook, it comes out right, but in gmail it adds a gap between the tr's.
Following the recommendation here: Gmail displaying gaps between images, I've tried to add style="display:block;" to the images, still no luck.
Here is the code I use:
<table cellspacing="0px" cellpadding="0px" border="0px" width="592px" height="254px" style="border-collapse:collapse; border:none; padding:0px; margin:0px; width:592px; height:254px;">
<tr cellspacing="0px" cellpadding="0px" width="592px" height="90px" style="padding:0px; margin:0px; width:592px; height:90px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="90px" style="padding:0px; margin:0px; width:83px; height:90px;"> </td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="90px" style="padding:0px; margin:0px; width:150px; height:90px;"><img src="new_sig.files/sig2.png" width="150px" height="90px"></td>
<td cellspacing="0px" cellpadding="0px" width="359px" height="90px" style="padding:0px; margin:0px; width:359px; height:90px;"><img src="new_sig.files/sig3.png" width="359px" height="90px"></td>
</tr>
<tr cellspacing="0px" cellpadding="0px" width="592px" height="64px" style="padding:0px; margin:0px; width:592px; height:64px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="64px" style="padding:0px; margin:0px; width:83px; height:64px;"><a href="http://www.facebook.com"><img style="border:none;" src="new_sig.files/sig4.png" width="83px" height="64px"></a></td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="64px" style="padding:0px; margin:0px; width:150px; height:64px;"><img src="new_sig.files/sig5.png" width="150px" height="64px"></td>
<td cellspacing="0px" cellpadding="0px" width="359px" height="64px" style="padding:0px; margin:0px; width:359px; height:64px;"><img src="new_sig.files/sig6.png" width="359px" height="64px"></td>
</tr>
<tr cellspacing="0px" cellpadding="0px" width="592px" height="100px" style="padding:0px; margin:0px; width:592px; height:100px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="100px" style="padding:0px; margin:0px; width:83px; height:100px;"><img src="new_sig.files/sig7.png" width="83px" height="100px"></td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="100px" style="padding:0px; margin:0px; width:150px; height:100px;"><img src="new_sig.files/sig8.png" width="150px" height="100px"></td>
<td cellspacing="0px" style="padding:0px 5px 0px 15px; margin:0px; width:339px; height:100px;line-height:16px; font-size:12px;color:#4f4f4f;font-family:arial;" >
Name LastName<br/>
Description<br/><br/>
<a href="http://www.site.com" style="color:#0875a4;">www.site.com</a>
<img src="new_sig.files/phone_icon.png" width="18px" height="28px"/>
972-(0)3-6960556
<img src="new_sig.files/mail_icon.png" width="18px" height="28px"/>
<a href="mailto:name@site.com" style="color:#0875a4;">name@site.com</a>
</td>
</tr>
</table>
Now, the code gmail reads, apparently, goes like this:
<table width="592" cellspacing="0" cellpadding="0" border="0" style="width: 444pt; border-collapse: collapse;">
<tbody>
<tr style="min-height: 67.5pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"> </span></p>
</td>
<td width="150" style="width: 112.5pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="90" width="150" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td>
<td width="359" style="width: 269.25pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="90" width="359" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td></tr>
<tr style="min-height: 48pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 48pt;">
<p class="MsoNormal"><a target="_blank" href="http://www.facebook.com/"><span style="font-size: 12pt; font-family: "Times New Roman","serif"; color: blue; text-decoration: none;">
<img height="64" width="83" border="0" src=""></span></a><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td><td width="150" style="width: 112.5pt; padding: 0in; min-height: 48pt;"><p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="64" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td>
<td width="359" style="width: 269.25pt; padding: 0in; min-height: 48pt;"><p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="64" width="359" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td></tr>
<tr style="min-height: 75pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 75pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="100" width="83" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td>
<td width="150" style="width: 112.5pt; padding: 0in; min-height: 75pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="100" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td>
<td width="339" style="width: 254.25pt; padding: 0in 3.75pt 0in 11.25pt; min-height: 75pt;">
<p style="line-height: 12pt;" class="MsoNormal"><span style="font-size: 9pt; color: rgb(79, 79, 79);">Name LastName<br>Description<br><br><a target="_blank" href="http://www.site.com">
<span style="color: rgb(8, 117, 164);">www.site.com</span></a> </span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<img height="28" width="18" border="0" src=""></span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">972-(0)3-6960556 </span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<img height="28" width="18" border="0" src=""></span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<a target="_blank" href="mailto:name@site.com">
<span style="color: rgb(8, 117, 164);">name@site.com</span></a> </span></p></td></tr>
</tbody></table>
I tried also giving the whole table line-height of 0, but that didn't work either.
The 2 images in the last cell, btw, aren't displayed in gmail for some reason.
update: didn't really notice this received more answers till now. we ended up simplifying the design/code a bit, and i stopped checking this page after a while. not sure if any of the solutions here would have worked, but i see they helped other people. thnx anyways :)
解决方案
For table cells that only contain an image, set the line-height to 0
<td style="line-height:0"><img ... /></td>
( Email On Acid was a good tip. )
这篇关于Gmail中添加了一个空白，位于Outlook的html签名中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
