gpt4 book ai didi

html - 为什么图像在前景中显示出差距?

转载 作者:行者123 更新时间:2023-11-28 03:44:25 24 4
gpt4 key购买 nike

我正在使用 HTML 创建电子邮件签名。我正在使用 HTML 表格来构建它。

这是我的 HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
padding : 0 0 0 0;
margin: 0 0 2px 0;
}
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="329" height="314">
<tr>
<td style="line-height: 0;">
<img src="CC-email-sig_01.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
<td style="font-family: Helvetica; font-size: 12px; text-align: right; padding-right: 20px; font-weight: bold;">
<p style="color: #3F4B54;">Sean Clough</p>
<p style="color: #3F4B54;">Writer/Owner </p>
<p style="color: #25408F;">Clough Copywriting</p>
<br/>
<p><span style="color: #25408F;">m</span> <span style="color: #3F4B54;">0419 031 052</span> </p>
<p><span style="color: #25408F;">a</span> <span style="color: #3F4B54; font-weight: bold;">PO Box 439</span> </p>
<p style="color: #3F4B54;">Bedford WA 6052</p>
<p><a href="http://cloughcopywriting.com.au" target="_blank">cloughcopywriting.com.au</a></p>
</td>
</tr>
<tr bgcolor="#25408F">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<a href="#"><img src="CC-email-sig_06.png" alt=""></a>
<a href="#"><img src="CC-email-sig_08.png" alt=""></a>
<a href="#"><img src="CC-email-sig_10.png" alt=""></a>
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="2" style="line-height: 100%;">
<img src="CC-email-sig_12.png" alt="" width="329" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
</table>
</body>
</html>

现在在浏览器中,它看起来像下面的图片:

enter image description here

但在 outlook 中,图像如下所示:

enter image description here

如果您看到,您会注意到红色箭头。在这里,我使用图像来显示曲线,但它在 outlook 中不是全宽的,但在浏览器中是完美的。

此外,人物图像和文本之间的填充也不相同。

我该如何解决这个问题?

谢谢。

最佳答案

所以,基本上,由于 outlook 的限制,我建议您在最后一行使用整个背景图像。

https://jsfiddle.net/pablodarde/css60wL2/

<tr background="https://s20.postimg.org/cz6xu0nz1/bg_Footer.png">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<a href="#"><img src="CC-email-sig_06.png" alt=""></a>
<a href="#"><img src="CC-email-sig_08.png" alt=""></a>
<a href="#"><img src="CC-email-sig_10.png" alt=""></a>
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>

关于html - 为什么图像在前景中显示出差距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44060985/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com