Question

在尝试为我的电子邮件提供更“专业”的外观时，我想创建一个整洁的签名。现在进行测试，我首先要创建一个简单的签名。如果我掌握了它，请将其扩展为更好的一个。

似乎我似乎无法“重置”或清除表格。但我无法弄清楚问题是什么......任何帮助将不胜感激！

对于初学者，我想创建一个签名like this：

我创建了一个包含简单代码的单个html文件（包括css）。见下文。我一直遇到的问题是，由于某种原因，当我在其中一个单元格中插入图像时，表格高度似乎更大（仅在底部）。 See problem。

您可以清楚地看到，桌子的高度超过了图片的高度。我无法弄清楚如何解决这个问题......

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EmailSignature</title>
  <style>
    table, td, tr {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin: 0;
}

table {
    width: 400px;
}

img {
    padding: 0;
    margin: 0;
}

#Avatar {
    width: 80px;
    height: 80px;
}

#Whitespace {
    width: 2px;
}

#BlueBar {
    width: 6px;
    background-color: #0CF;
    margin: 20px;
}

</style>
</head>

<body>
<table>
  <tr>
    <td rowspan="3" id="Avatar"><img id="Avatar" src="enhanced-buzz-16839-1297795475-9.jpg"></td>
    <td rowspan="3" id="Whitespace">&nbsp;</td>
    <td rowspan="3" id="BlueBar">&nbsp;</td>
    <td rowspan="3" id="Whitespace">&nbsp;</td>
    <td>Tekst</td>
  </tr>
 <tr>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
</table>
</body>
</html>

Answer 1

in terms of solving your problem you may want to re-look at the structure of your table. The development of HTML emails and signatures can be pretty hard to do as many email clients respond different and have different support levels.

A guide to writing HTML, CSS and JS for email client usage has been created by Campaign Monitor and can be found here: https://goo.gl/oo1tcU

Support is so varied and there are very few 'safe' elements and attributes also campaign monitor's guide sadly doesn't include a list of the buggy HTML attributes. For example personally I have experienced rowspan and colspan not working correctly in a lot of email clients therefore I wouldn't suggest using them at all. Instead draw up a grid which has equal structure and use empty tags with defined HTML width and height attributes to make the table work for you.

Unfortunately to make an signature look exactly the same in all clients steps like using empty but defined tags are necessary or some clients will simply ADD the 's the colspans are running over.

In HTML emails/signatures you must define EVERYTHING to make sure nothing changes, a table tag I use at the start of all my projects looks something like this:

<table width="[your desired width]" align="center" cellpadding="0" cellspacing="0" border="0" frame="0" bgcolor="#fff"
            style="border-spacing: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif;
            background-color: #fff; border-collapse: collapse; color: #000; font-size: 16px; line-height: 19px;" >

Also for all images use a tag like below and define the width and height in HTML NOT CSS.

<img src="" alt="" width="" height="" style="display: block; border: none;"/>

Email clients cause you to write HTML like its the 1990s, it's very frustrating but without considerations like these you may get the result you want in one client but if you send to another your signature will look different to a recipient. As you are trying to increase your professionalism I assume this wouldn't be desired!

Another tip I would suggest is using as much imagery as possible (and remember to define the width and height in HTML) because if defined correctly a structure built with every td and img tag width and height defined will almost never change. This is beneficial because text fonts also have low support unless they are standard fonts e.g. Arial!

Finally use ONLY Inline styles, many clients strip anything in a head tag out!

表高度超过图像

1 个答案: