Outlook

के लिए HTML ईमेल स्वरूपण मेरे पास एक HTML न्यूजलेटर है जो अधिकांश ईमेल क्लाइंट में काम करता है, लेकिन स्वरूपण Outlook में गड़बड़ हो जाता है।Outlook

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 
    body { 
    background-color: #98AFC7; 
    } 
</style> 
<title></title> 
</head> 
<body> 
<table border="1px solid" cellspacing="0" cellpadding="10px" width="600" style="margin-left: auto; margin-right: auto; height:auto; background-color: #ffffff; margin-top: 60px;"> 
    <tr> 
     <td align="top" style="padding: 10px; font-family: arial; font-size: 12px;" ><center>Email not displaying correctly?<a href="#"><strong> View it in your browser</strong></a></center></td> 
    </tr> 
    <tr> 
     <td style="border: 1px solid; height: 80px; text-align: center; padding: 10px;"><img src="http://demo.frostmiller.com/email/img/banner.jpg" alt="Banner will go here" align="middle" style="border: 1px solid;"></td> 
    </tr> 
    <tr> 
     <td> 
      <table style="border: 0; cellspacing: 0; cellpadding: 10px; height: auto;"> 
       <tr> 
        <td valign="baseline" style="padding: 10px; width:400px; border: 1px solid; halign: top;"> 
        <h3>Top Stories</h3> 
         <ul> 
          <li>Topic 1</li> 
          <li>Topic 2</li> 
          <li>Topic 3</li> 
         </ul> 
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
        </td> 
        <td valign="baseline" style="padding: 10px; border: 1px solid;"> 
         <h3>Latest News</h3> 
         <p> 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
         </p> 
        </td> 
       </tr> 
      </table>     
     </td> 
    </tr> 
    <tr> 
     <td cellpadding="10px" style="border: 1px solid; cellspacing: 0; width: 100%; height: auto; text-align: center;"> 
      <strong>Copyright &copy 2011 Frost Miller Group </strong> 
     </td> 
    </tr> 
    <tr> 
     <td style="border: 1px solid; cellspacing: 0; cellpadding: 10px; width: 100%; height: auto"> 
      <center> 
      <a href="#">Contact Us</a> 
      &nbsp; 
      <a href="#">Terms of Use</a> 
      &nbsp; 
      <a href="#">Trademarks</a> 
      &nbsp; 
      <a href="#">Privacy Statement</a> 
      &nbsp; 
      <a href="#">Site Feedback</a> 
      </center> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

Outlook में सही तरीके से प्रदर्शित करने के लिए मुझे क्या परिवर्तन करने की आवश्यकता है?

स्रोत

2011-05-02 user544079

शायद एक स्क्रीनशॉट करते हैं विशिष्ट मदद देने के लिए सक्षम होने के लिए, आप के समझाने के लिए क्या विशेष भागों विशेष रूप से "में गड़बड़ हो" है, या। यह जानने में भी मदद करता है कि आपको Outlook के किस संस्करण में समस्या आती है।

किसी भी तरह से, CampaignMonitor.com's CSS guide ने अक्सर मुझे ईमेल क्लाइंट असंगतताओं को डिबग करने में मदद की है।

अधिक परिष्कृत चयनकर्ताओं के विभिन्न प्रकार:

कि गाइड आप देख सकते हैं कई चीजें सिर्फ अच्छी तरह से या बिल्कुल भी आउटलुक में काम नहीं करेगा से, यहाँ अधिक महत्त्वपूर्ण कुछ मुख्य आकर्षण हैं उदाहरण के लिए E:first-child, E:hover, E > F (बाल संयोजक), E + F (निकट भाई संयोजक), E ~ F (सामान्य भाई संयोजक)। दुर्भाग्य से इसका मतलब इनलाइन शैलियों जैसे कामकाज का सहारा लेना है।
कुछ फ़ॉन्ट गुण, उदा। white-space काम नहीं करेगा।
background-image संपत्ति काम नहीं करेगी।
बॉक्स मॉडल गुणों के साथ कई समस्याएं हैं, सबसे महत्वपूर्ण height, width, और max- संस्करण या तो उपयोग करने योग्य नहीं हैं या कुछ तत्वों के लिए बग हैं।
पोजिशनिंग और प्रदर्शन समस्याएं (उदा। display, float एस और position सभी बाहर हैं)।

संक्षेप में: सीएसएस और आउटलुक संयोजन एक दर्द हो सकता है। कई बदसूरत कामकाज का उपयोग करने के लिए तैयार रहें।

पीएस। आपके विशिष्ट मामले में, आपके एचटीएमएल में दो मामूली समस्याएं हैं जो आपको अजीब व्यवहार कर सकती हैं। "align=top" है जहां आप शायद vertical-align का उपयोग करना चाहते थे। इसके अलावा: cell-paddingtd एस के लिए मौजूद नहीं है।

स्रोत

2011-05-02 20:01:19 Jeroen

कई साल बाद, Microsoft Outlook 2013 अभी भी आउटलुक 2007 :( – Zarepheth

@Zarepheth ऐ के रूप में रेंडरिंग इंजन, मैं अपने ही सवाल का जवाब भी हर 6 से 18 महीने फिर से मिलना है, कभी कभी मैं भी यहां भूमि एक ही HTML है जब Googling। – Jeroen

एक उपयोगी जोड़ मैंने ठोकर खाई: वास्तव में परीक्षण करने के लिए कि Outlook में एक HTML ईमेल कैसे प्रस्तुत करता है, आप वर्ड में HTML फ़ाइल खोल सकते हैं, एमएस ऑफिस अनुप्रयोग दोनों एक ही प्रतिपादन इंजन का उपयोग करते हैं। – Paul

आपको निश्चित रूप से एमएसडीएन की जांच करनी चाहिए कि सीएसएस और एचटीएमएल के संबंध में Outlook क्या समर्थन करेगा। लिंक यहां है: http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx। यदि आपके पास कम से कम Office 2007 नहीं है तो आपको वास्तव में अपग्रेड करना होगा क्योंकि 2007 और पिछले संस्करणों के बीच प्रमुख अंतर हैं। परिणामस्वरूप ईमेल को फ़ाइल में सहेजने और फ़ायरफ़ॉक्स के साथ इसकी जांच करने का प्रयास करें, आप देखेंगे कि दृष्टिकोण से क्या बदला जा रहा है और संभवतः पूछने के लिए एक और विशिष्ट प्रश्न है। आप ईमेल को एक प्रकार के पूर्वावलोकन के रूप में देखने के लिए वर्ड का उपयोग कर सकते हैं (लेकिन आपको यह नहीं मिलेगा कि किन शैलियों को लागू/लागू नहीं किया जा रहा है।

स्रोत

2011-05-02 20:15:41 scrappedcola

एक HTML के रूप में सहेजना और फिर इसकी जांच करना एक ब्राउज़र में एक महान सिफारिश है (और बस मुझे बड़े पैमाने पर मदद मिली) - धन्यवाद – hobailey

मैंने अपने ईमेल में वीएमएल (वेक्टर मार्कअप भाषा) आधारित स्वरूपण का उपयोग किया टेम्पलेट वीएमएल के आधार पर आपने टिप्पणी के भीतर अपना कोड लिखा है मैंने इस साइट से सहायता ली।

https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design#supporttable

स्रोत

2017-11-14 12:03:02

कृपया केवल लिंक के उत्तर से बचें और वास्तव में आपके पोस्ट में प्रश्न का उत्तर दें। – sjaustirni

उत्तर

संबंधित मुद्दे