我用HTML创建的用于Outlook电子邮件签名的表似乎显示出奇怪的问题,增加了额外的间距。
以下是它在Outlook中的外观:
以下是Chrome浏览器的外观:
代码如下:
<html>
<head>
<title>JohnDoe</title>
<style>
p {
align:justify;
}
#contentTable{
padding-top: 25px;
padding-right: 35px;
padding-bottom: 25px;
padding-left: 35px;
width: 480px;
height: 105px;
}
#logo{
height: 210px;
width: 228px;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
padding: 0;
display: block;
border-collapse:collapse;
}
.table{
border-collapse:collapse;
}
#nameRow{
height: 18px;
}
#nameField{
font-size: 24;
font-family: "Helvetica";
color: #73A84D;
font-weight: bold;
width: 100%;
}
#dirRow{
height: 14px;
}
#dirField{
font-size: 18;
font-family: "Helvetica";
color: #606062;
}
.descRow{
}
.descField{
font-size: 10;
font-family: "Helvetica";
font-weight: 900;
color: #96989A;
}
.valueField{
font-size: 10;
font-family: "Helvetica";
font-weight: 900;
color: #606062;
text-align: justify;
}
</style>
<body>
<table id="contentTable">
<tr>
<td>
<img src="http://s14.postimg.org/eo35t2l4t/logo.jpg" />
</td>
<td>
<table id="infoTable">
<tr id="nameRow">
<td id="nameField">JOHN DOE</td>
</tr>
<tr id="dirRow">
<td id="dirField">
Attorney
</td>
</tr>
<tr>
<table>
<tr>
<td>
<p id="descFieldPara" class="descField">
PHONE:<br>
EMAIL:<br>
<br>
URL:
</p>
</td>
<td id="valueFieldPara" class="valueField">
<p>+ 12 3456 789 012<br>JOHN.D@BLAHBLAH.COM.US<br>ATTORNEY@BLAHBLAHJOHNDOE.COM.US<br>WWW.BLAHBLAHJOHNDOE.COM.US
</p>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
</body>
</head>
</html>
有人可以告诉我这种差异的原因是什么?