Question

我正在使用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>

现在在浏览器中，它看起来像下面的图像：

但是在展望中，图像看起来像吼叫：

如果你看到那么你可以注意到红色箭头。在这里，我使用的是一个图像来显示曲线，但它在视觉上并不是全宽，而是在浏览器上完美。

此外，Man图像和文本之间的填充不相同。

我该如何解决这个问题？

感谢。

Answer 1

所以，基本上，由于前景限制，我建议你使用整个背景图像作为最后一行。

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>

为什么形象在前景上显示出差距？

1 个答案: