2015-01-12 97 views
-1

我創建了一個簽名JSFiddle 的問題是,它看起來gMailHotmail略有不同(最差的前景) 但我無法弄清楚什麼是錯的。有毛病的電子郵件簽名

我試過ThisThis但它不工作。

<html> 
    <head/> 
    <body> 
    <div id="mainDiv"> 

    <table id="tabMain2" style="max-height: 100px;width: 100%;background-color: #f7f7f7;border-spacing: 0;border-collapse: collapse;padding: 0"><tr><td colspan="2"> 
       <table style="border-spacing: 0;border-collapse: collapse;padding: 0"><tr><td> 
          <label class="boldText upperText normalText nameHeadder" style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 14px;line-height: 12px"> 
           full name 
          </label> 
          <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px"> 
           /
          </label> 
          <label class="upperText normalText" style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px"> 
           DEsec 
          </label> 
         </td> 
        </tr><tr><td> 
          <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px"> 
           [email protected] 
          </label> 
          <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px"> 
           /
          </label> 
          <label class="normalText upperText" style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px"> 
           +code-mob No 
          </label> 
         </td> 
        </tr></table></td> 
     </tr><tr><td colspan="2"> 
       <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px"> 
          
       </label> 
      </td> 
     </tr><tr><td class="logoTd2" style="max-width: 68px;width: 68px;max-height: 68px;height: 68px;text-align: center"> 
       <img class="logoRender" src="http://seprojects.in/commonResource/images/ssa_logo_noStroke_96.png" alt="ssa" height="60" width="60" style="text-align: center;-ms-image-rendering: optimizeQuality;-o-image-rendering: optimizeQuality;image-rendering: optimizeQuality"/></td> 
      <td> 

       <p style="margin: 0"> 
        <span class="boldText normalText companyHeadder" style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 15px;line-height: 12px">Saisanket Automation Pvt Ltd.</span> 
       </p> 

       <p style="margin: 0"> 
        <span class="upperText normalText boldText" style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Office:</span> 
        <span class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">9029979729</span> 
        <span class="upperText normalText boldText" style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Fax:</span> 
        <span class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">28709994</span> 
       </p> 

       <p style="margin: 0"> 
        <span class="boldText normalText" style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Address: </span> 
        <span class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">B 402, Western Edge II, Western Express Highway, Borivali(East), Mumbai, Maharashtra 400066, INDIA</span> 
       </p> 

      </td> 
     </tr></table><br/><p class="disclamerText" style="font-family: Verdana, Arial, sans-serif;font-size: 9px;margin: 0"> 
     This e-mail message may contain confidential or legally privileged information and is intended only for the use of the intended recipient(s). Any unauthorized disclosure, dissemination, distribution, copying or the taking of any action in reliance on the information herein is prohibited. E-mails are not secure and cannot be guaranteed to be error free as they can be intercepted, amended, or contain viruses. Anyone who communicates with us by e-mail is deemed to have accepted these risks. Saisanket Automation Pvt Ltd is not responsible for errors or omissions in this message and denies any responsibility for any damage arising from the use of e-mail. Any opinion and other statement contained in this message and any attachment are solely those of the author and do not necessarily represent those of the company. 
    </p> 

</div> 
    </body> 
</html> 
+1

你有你在相應的郵件客戶端遇到的行爲的任何截圖?是否有一個原因是您將'class'es添加到您的元素(對於舊的mailclient支持,您應該只依賴內聯樣式進行樣式設置)?你爲什麼使用'label'元素(這些只能在'form'元素中使用)? – haxxxton

+0

忽略類標記,我忘了刪除類標記,但我包括所有的CSS內聯。我附上了圖片(點擊我的問題中的Gmail或Hotmail)。關於標籤元素,如果我要顯示文本,還應該使用哪些內容。 –

+0

'span'或'p'可以工作,並且打算用於基於文本的元素,如果您想避免重寫默認樣式,請使用'span',因爲它沒有默認'margin'。你可能會發現,這個默認的'margin'也被應用於'label'元素,導致gmail和hotmail – haxxxton

回答

0

table-layout:fixed組合並添加cellspacing="0" cellpadding="0"到表中,以及作爲更具體的瞭解您的span小號tr S的高度和td S的關係修復這些佈局問題。我冒昧地補充&nbsp;地方我假設你沒有要你的破線,並刪除所有classid屬性

<div> 
    <table style="max-height: 120px;height:120px;width: 100%;background-color: #f7f7f7;border-spacing: 0;border-collapse: collapse;padding: 0" cellspacing="0" cellpadding="0"> 
     <tr style="height:20px;border-spacing: 0;border-collapse: collapse;"> 
      <td colspan="2" style="height:20px;border-spacing: 0;border-collapse: collapse;"> 
       <table style="table-layout:fixed;border-spacing: 0;border-collapse: collapse;padding: 0;height:20px;margin:0;" cellspacing="0" cellpadding="0"> 
        <tr style="height:20px;"> 
         <td style="height:20px;"> 
          <span style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 14px;line-height: 12px;display:inline-block;"> 
           full name 
          </span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;"> 
           /
          </span>&nbsp;<span style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;"> 
           DEsec 
          </span> 
         </td> 
        </tr> 
        <tr style="height:20px;"> 
         <td style="height:20px;"> 
          <span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;"> 
           [email protected] 
          </span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;"> 
           /
          </span>&nbsp;<span style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;"> 
           +code-mob No 
          </span> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr style="height:12px;"> 
      <td colspan="2" style="height:12px;"> 
       <span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">&nbsp;</span> 
      </td> 
     </tr> 
     <tr style="max-height: 68px;height: 68px;"> 
      <td style="max-width: 68px;width: 68px;text-align: center"> 
       <img src="http://seprojects.in/commonResource/images/ssa_logo_noStroke_96.png" alt="ssa" height="60" width="60" style="text-align: center;-ms-image-rendering: optimizeQuality;-o-image-rendering: optimizeQuality;image-rendering: optimizeQuality" /> 
      </td> 
      <td style="max-height: 68px;height: 68px;width:auto;"> 
       <p style="margin: 0;height:12px;"> 
        <span style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 15px;line-height: 12px">Saisanket Automation Pvt Ltd.</span> 
       </p> 
       <p style="margin: 0;height:12px;"> 
        <span style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Office:</span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">9029979729</span>&nbsp;<span style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Fax:</span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">28709994</span> 
       </p> 
       <p style="margin: 0;height:12px;"> 
        <span style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Address: </span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">B 402, Western Edge II, Western Express Highway, Borivali(East), Mumbai, Maharashtra 400066, INDIA</span> 
       </p> 
      </td> 
     </tr> 
    </table> 
    <br/> 
    <p style="font-family: Verdana, Arial, sans-serif;font-size: 9px;margin: 0"> 
     This e-mail message may contain confidential or legally privileged information and is intended only for the use of the intended recipient(s). Any unauthorized disclosure, dissemination, distribution, copying or the taking of any action in reliance on the information herein is prohibited. E-mails are not secure and cannot be guaranteed to be error free as they can be intercepted, amended, or contain viruses. Anyone who communicates with us by e-mail is deemed to have accepted these risks. Saisanket Automation Pvt Ltd is not responsible for errors or omissions in this message and denies any responsibility for any damage arising from the use of e-mail. Any opinion and other statement contained in this message and any attachment are solely those of the author and do not necessarily represent those of the company. 
    </p> 

</div> 
+0

你還有'span'在'p'裏面,這導致了hotmail中的垂直邊緣(這是我的主要問題之一)。 –