Outlook电子邮件签名中HTML表中的不需要的间距

时间:2015-03-19 16:32:49

标签: html css outlook html-email

我用HTML创建的用于Outlook电子邮件签名的表似乎显示出奇怪的问题,增加了额外的间距。

以下是它在Outlook中的外观: enter image description here

以下是Chrome浏览器的外观: enter image description here

代码如下:

<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>
                                        &nbsp;<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>

有人可以告诉我这种差异的原因是什么?

0 个答案:

没有答案