程序员经验分享-hwhale

Gmail 中添加了一个间隙，位于 Outlook 的 html 签名内

2023-12-24

我创建了一个需要在 Outlook 中使用的 html 签名。根据建议，我使用了表格布局，给定所有图像，甚至 td、tr 和表格本身的特定高度和宽度、0 填充和边距，甚至尝试在 css 和旧式方式中添加这些内容实际标签。
在 Outlook 中，结果是正确的，但在 Gmail 中，它在 tr 之间增加了一个间隙。 按照这里的建议：Gmail 显示图像之间的间隙 https://stackoverflow.com/questions/4890876/gmail-displaying-gaps-between-images，我尝试添加 style="display:block;"到图像，仍然没有运气。 这是我使用的代码：

<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;">&nbsp;</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:[email protected] /cdn-cgi/l/email-protection" style="color:#0875a4;">[email protected] /cdn-cgi/l/email-protection</a>
</td>
</tr>
</table>

现在，gmail 的代码显然是这样的：

<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: &quot;Times New Roman&quot;,&quot;serif&quot;;">&nbsp;</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: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="90" width="150" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></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: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="90" width="359" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></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: &quot;Times New Roman&quot;,&quot;serif&quot;; color: blue; text-decoration: none;">
<img height="64" width="83" border="0" src=""></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;Times New Roman&quot;,&quot;serif&quot;;">
<img height="64" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></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: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="64" width="359" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></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: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="100" width="83" border="0" src=""></span><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: 75pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="100" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></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:[email protected] /cdn-cgi/l/email-protection">
<span style="color: rgb(8, 117, 164);">[email protected] /cdn-cgi/l/email-protection</span></a> </span></p></td></tr>
</tbody></table>

我也尝试将整个表格的行高设置为 0，但这也不起作用。
顺便说一句，最后一个单元格中的 2 张图像由于某种原因未显示在 Gmail 中。

更新：到目前为止还没有真正注意到这收到了更多答案。我们最终稍微简化了设计/代码，一段时间后我停止检查此页面。不确定这里的任何解决方案是否有效，但我看到它们帮助了其他人。无论如何，谢谢:)


对于仅包含图像的表格单元格，将行高设置为 0

<td style="line-height:0"><img ... /></td>

（关于酸的电子邮件是一个很好的提示。）

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

Outlook

Gmail

signature

Gmail 中添加了一个间隙，位于 Outlook 的 html 签名内 的相关文章

  • HTML/CSS - 使用图像作为输入类型=文件

    如何使用此图像 http h899310 devhost se proxy newProxy uplfile png http h899310 devhost se proxy newProxy uplfile png 而不是常规的

  • 如何清除画布元素中的多边形区域？

    我使用过clearRect函数 但没有看到多边形的等效函数 我天真地尝试过 ctx fillStyle transparent ctx beginPath ctx moveTo 0 0 ctx lineTo 100 50 ctx lineT

  • 嵌入来自谷歌驱动器的图像，没有灰色边框和缩放工具？

    I have a webpage that has an image that is stored in google drive and using the google drive embed code results in this

  • 使用 CSS 等高列

    我想对我的 CSS 表使用百分比 不幸的是 它对我不起作用 这段代码有什么问题 我应该使用 flexbox 而不是 table 吗 我想使用表格 因为我想要相同高度的列 ul list style none margin 0 display

  • 如何使用 JS/Puppeteer 上传文件

    我试图弄清楚如何将图片文件上传到输入对话框中 不可能只输入名称并按 Enter 键 因为我没有找到使用 Puppeteer 实现自动化的方法 我想我必须设置一些值作为图片 但我不知道该怎么做 有任何想法吗 您使用上传文件elementHan

  • 如何在jsp中使用javascript动态创建下拉框？

    我正在尝试动态创建下拉框 就像当我单击添加按钮时它必须创建新的下拉框 下拉列表还包含动态值 例如需要当前年份并且必须显示最多五年 请建议我这样做 谢谢 这是我尝试过的代码 JavaScript 代码 function Add var nam

  • 如何停止在 div 外部显示图像

    考虑这段代码 div style width 100px height 100px border 1px solid black div img src http rabbitempire org wp content uploads Pe

  • 为什么authentication：'plain'是rails中actionmailer的默认设置（使用gmail smtp）？

    我正在阅读Rails 的actionmailer 我的问题是关于所述的默认设置here http guides rubyonrails org action mailer basics html action mailer configur

  • IE9 中的 HTML5 视频两侧显示黑色边框

    我在我的网站中使用 HTML5 视频标签 该视频在所有浏览器中都能完美播放 但在 IE9 中它显示黑色边框 黑色扩展名 就像通常情况下 当播放器的大小大于视频的大小时 视频播放器会在其两侧显示一些黑色扩展 这是我们使用的解决方案 对于视频

  • 编辑时可以在文本框控件内使用 Angular 的管道格式化程序吗？

    我已经声明了一种将大数字分成三位数组的格式 并像这样经常使用它 div Huge number i am huge make threesome div 现在 有一个对相应功能的请求 但在像这样的输入控件中实现

  • 带有图像的 Svg 在 Safari 中不显示

    在我的网站中 我嵌入了一些 svgs 它们在 Chrome Firefox IE 9 和 Safari 中似乎都工作得很好 然而 一旦 svg 中包含图像 safari 就不会渲染该图像 基于之前的类似主题 我尝试了以下内容 SVG 元素在

  • 使用 jquery 添加和删除点击时的 div

    我有一个空的 div 其中有另一个可拖动的 div 现在 无论我在哪里单击容器 可拖动 div 都应附加到 0 0 位置 当单击关闭按钮时 我需要删除该可拖动 div 我该怎么做 这就是我所拥有的 http jsfiddle net g6c

  • 使用 jQuery 的 ASP.NET 中的模态表单

    我对 ASP NET 开发还比较陌生 到目前为止 我已经设法让事情变得简单 但我现在的需求有点复杂 到目前为止还没有得到太多乐趣 本质上我希望在单击按钮添加新用户时弹出一个模式表单 所以我发现这个在 jQuery 网站上 http jque

  • 通过 jquery 设置 type="file" 的值[重复]

    这个问题在这里已经有答案了 Note 下面的答案反映了 2009 年旧版浏览器的状态 现在 您实际上可以在 2017 年使用 JavaScript 动态 编程地设置文件输入元素的值 有关详细信息以及演示 请参阅此问题中的答案 如何以编程方式

  • YouTube iframe 嵌入 - 全屏

    我有一个嵌入网页的表单 填写完表格后 将使用 iframe 嵌入显示 YouTube 视频 当我进入 YouTube 视频的全屏模式时 什么也没有发生 嵌套 iframe 的全屏是否受到父 iframe 尺寸的限制 在当前的 YouTube

  • 如何使 superfish 下拉菜单响应式？

    我正在使用带有骨架框架的 superfish 下拉菜单 我希望它也能在手机上运行 默认情况下 它显示下拉项目 但它将鼠标悬停在其下方的项目上 我想以某种方式拥有它 以便它将父项推到它下面 有什么解决办法吗 这是一个更好的答案 我能够将 Su

  • Bootstrap 4 列和行产生不需要的填充[重复]

    这个问题在这里已经有答案了 我正在尝试使用 bootstrap 创建列和行来放置我的图像 但是在图像周围添加了太多的填充 这导致我的图像看起来不像设计 这就是我构建 HTML 的方式

  • 通过 HTML 将复杂变量传递给 javascript 的正确方法

    我试图摆脱使用 PHP 的 htmlentities 但我在这里停止了 但后来我想 我不做替换和检查特殊字符 而是只 JSON 整个对象 这提供了一个非常不受欢迎的结果 其中包含大量双引号 那么我应该怎么做呢 我应该为每个图像分配一个数字唯

  • Gecko/Firefox 对 HTML5 通知的支持

    我想知道是否有任何内置支持HTML5 通知到目前为止 Gecko 浏览器有哪些功能 也许有一些隐藏的开发人员 我知道 WebKitwindow webkitNotifications效果很好 那么 有 Firefox 实现吗 Update

  • 问号字符显示在文本中。为什么是这样？

    我有一个备份服务器 可以自动备份我的实时站点 包括文件和数据库 在实时站点上 文本看起来不错 但是当您查看它的镜像版本时 它会显示 在某些文本中 该文本存储在新闻数据库表中 这是实时服务器和镜像服务器上的屏幕截图 将其备份到镜像服务器的过程

随机推荐

热门标签