2012-01-24 27 views
24

आउटलुक 2010/आउटलुक 2007 के लिए आउटलुक 2010 में लाइन-ऊंचाई काम नहीं कर रहा है, जो मेरे एचटीएमएल ईमेल में लाइन-ऊंचाई को सम्मानित नहीं करता है। (यह Outlook 00 और Outlook 03 में पूरी तरह से काम करता है)एचटीएमएल ईमेल

मैं कुछ व्यापक googling कर रहा हूं - और HTML सीएसएस समर्थन चार्ट मैंने पाया है कि Outlook 2010/2007 लाइन ऊंचाई को समझना चाहिए।

मैंने ब्लॉक पैरेंट तत्व, और बच्चे अनुच्छेद तत्व पर लाइन-ऊंचाई डालने का प्रयास किया है, और सिर में स्टाइल टैग में आईडी पर और उपरोक्त के प्रत्येक संयोजन के रूप में।

मैंने यह भी सुनिश्चित किया है कि मैं लाइन-ऊंचाई को एक पिक्सेल मान के रूप में स्पष्ट रूप से घोषित कर रहा हूं जो टेक्स्ट आकार से काफी बड़ा है (लेकिन मैंने% और em भी कोशिश की)। घोषणा करने में कोशिश की! घोषणा में महत्वपूर्ण - और यहां तक ​​कि ऑनलाइन खोज सकने वाली हर दूसरी युक्ति के साथ वैल्यूइन भी कोशिश की .... मैं लाइन-ऊंचाई का उपयोग कर रहा हूं उदा। बटन पैडिंग-टॉप और पैडिंग-डाउन निर्धारित करें, क्योंकि पैडिंग/मार्जिन के लिए HTML ईमेल समर्थन इतना खराब है।

मैं वास्तव में इसके साथ किसी भी मदद की सराहना करता हूं। वास्तव में सिर-बैंगिंग बिंदु पर वास्तव में!

वास्तविक ईमेल बहुत जटिल है क्योंकि यह एक जटिल न्यूजलेटर है, लेकिन यहां सिर की शैली का एक स्निपेट है, और एक टेबल अनुभाग जिसमें लाइन-ऊंचाई काम नहीं कर रही है - मुझे उम्मीद है कि यह पर्याप्त है !:

<style type="text/css" media="screen"> 
    html { 
     -webkit-text-size-adjust:none; 
     -webkit-background-size:100%; 
    } 
    body{ 
     margin: 0px 0px 0px 0px !important; 
     padding: 0px 0px 0px 0px !important; 
     margin-bottom:0px !important; 
     margin-top:0px !important; 
     background-color:#e5e5e5; 
    } 
    p{ 
     margin: 0px 0px 0px 0px !important; 
     padding: 0px 0px 0px 0px !important; 
     margin-bottom:0px !important; 
     margin-top:0px !important; 
     display:block; 
    } 
    a:link, a:visited, a:active{ 
     color:#55c2d9; 
     text-decoration: underline; 
    } 
    a:hover{ 
     text-decoration: underline; 
    } 
    .body a:link, a:visited, a:active{ 
     color:#55c2d9; 
    } 
    img{ 
     border: 0; 
     display: block; 
    } 
    table.main { 
     background-color: #ffffff; 
     width:650px; 
    } 
    td { 

    } 
    #header-top p{ 
     line-height:33px; 
    } 

</style> 

        <!-- Content --> 
        <table border="0" cellspacing="0" cellpadding="0" class="body"> 
         <!-- Row 1 --> 
         <tr valign="top"> 
          <td background="images/bg-texture-top.jpg" style="background-repeat:repeat-y; background-color:#262626;" valign="top" width="650" height="33" bgcolor="#262626"> 

           <table border="0" cellspacing="0" cellpadding="0" id="header-top"> 

            <!-- Row 1.1 --> 
            <tr valign="top"> 
             <td style="" valign="top" width="16" height="" bgcolor=""> 
             </td> 

             <td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="490" height="33" bgcolor=""> 
              <p><a href="#">click here to view this email in a browser</a></p> 
             </td> 
             <td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="62" height="33" bgcolor=""> 
              <p>find us on:</p> 
             </td> 

             <td style="" valign="top" width="16" height="" bgcolor=""> 
             </td> 
            </tr> 

           </table> 

          </td> 
         </tr> 

        </table> <!-- Content --> 
+0

पिछला कार्यालय संस्करण HTML संदेशों को प्रदर्शित करने और संपादित करने के लिए एक HTML विजेट का उपयोग करता है। Outlook 2007 आगे वर्ड विजेट का उपयोग करता है, जो HTML के लिए बेहद टूटा हुआ है। – zgpmax

उत्तर

3

आउटलुक HTML को प्रतिपादन और संपादन के लिए HTML प्रोसेसर शब्द का उपयोग करता है। टेबल लेआउट में उपयोग करें और सीएसएस के बारे में भूल जाओ, और यदि - केवल इनलाइन सीएसएस का उपयोग करें। आपके पास कुछ संभावनाएं हैं: पृष्ठभूमि, फ़ॉन्ट-फ़ैमिली, font.size, रंग।

समर्थित सीएसएस की एक पूरी सूची here मिल सकती है, एक ट्यूटोरियल here है।

लेकिन आप भी अपने रिसीवर के बारे में सोचना - अगर वे गूगल मेल पर हैं या yohoo मेल अपने सीएसएस बाहर छीन लिया जा सकता है पूरी तरह से

campaignmonitor.com/resources

ईमेल न्यूज़लेटर के विकास के लिए एक अच्छा स्रोत है, वे कर रहे हैं सभी ईमेल सेवाओं और उनकी एचटीएमएल/सीएसएस सुविधाओं की दोहराव की जांच भी कर रहे हैं

1

तालिका सेल पर इन-लाइन सीएसएस का उपयोग करके line-height सेट करना ठीक होना चाहिए, लेकिन आपको वास्तव में उन <p> टैग की आवश्यकता नहीं है, जो अभी प्रस्तुत करते हैं स्वरूपण समस्याओं और में <style> टैग में <p> टैग के संदर्भ कई ग्राहकों द्वारा अनदेखा किया जाना चाहिए।

+0

धन्यवाद, टेबल सेल पर सेटिंग्स 'लाइन-ऊंचाई' मेरे लिए काम किया :) \t 'mso-line-height-rule: बिल्कुल 'मेरे लिए काम नहीं किया। – shiva

9

देर से प्रतिक्रिया, लेकिन चूंकि मैंने हाल ही में Outlook में इसी तरह की लाइन-ऊंचाई समस्या के माध्यम से काम किया था, इसलिए मैं अपने हैकी वर्कअराउंड को साझा करना चाहता था।

किसी भी कारण से, यदि आप टैग के क्लोजिंग टैग से पहले एचटीएमएल में एक अनियंत्रित सूची फेंकते हैं तो आपने लाइन-ऊंचाई निर्दिष्ट की है, तो Outlook 2010 लाइन-ऊंचाई का सम्मान करता है।

आप बिना क्रम वाली सूची खाली और invisble बना सकते हैं:

<ul style="list-style-type: none; visibility:hidden;"></ul> 

उदाहरण:

<p style="font-size: 12px; line-height: 18px;"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<ul style="list-style-type: none; visibility:hidden;"></ul> 
</p> 

अस्वीकरण: मैं विस्तृत रूप से इस परीक्षण नहीं किया। यह मेरे टेम्पलेट में Outlook 2010 में एक ईएसपी, जीमेल के वर्तमान संस्करण (27 जुलाई, 2012), और आईफोन ईमेल ऐप के माध्यम से काम करता है।मुझे नहीं पता कि यह चाल सार्वभौमिक रूप से अन्य टैग्स में लाइन ऊंचाई समस्या को हल करती है या नहीं। मैं इसे एक कठोर फिक्स भी स्वीकार करता हूं, लेकिन यह एक कठोर समस्या है; और, जैसा कि अक्सर HTML विनिर्देशों के लिए Outlook की फ़्लैगेंट अवहेलना के मामले में होता है, फ़िक्स अक्सर समस्या के रूप में बेवकूफ होता है। यदि आप चाहें तो इसका इस्तेमाल करें, लेकिन वास्तविक प्राप्तकर्ताओं को भेजने से पहले इसे व्यापक रूप से जांचें।

+0

यह अब तक इस समस्या का सबसे विश्वसनीय समाधान प्रतीत होता है। साझा करने के लिए धन्यवाद स्टीव। – blackhawk

15

आउटलुक percents में निर्दिष्ट लाइन-ऊंचाई का समर्थन करता है। उदाहरण के लिए लाइन-ऊंचाई: 1.1 समर्थित नहीं है, लेकिन रेखा-ऊंचाई: 110% है।

35

मैं line-height नियंत्रित करने के लिए इनलाइन सीएसएस के संयोजन का उपयोग:

<p style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:110%;font-size:11pt;">paragraph text</p>

प्रमुख तत्व माइक्रोसॉफ्ट मालिकाना सीएसएस गुण, mso-line-height-rule: exactly; है। पैडिंग सिर्फ अनुच्छेद टैग को अनावश्यक स्थान बनाने से रोकती है।

+4

'mso-line-height-rule: बिल्कुल; 'मेरे लिए काम किया। धन्यवाद। – MrMisterMan

+28

मुझे प्यार है कि यह एक माइक्रोसॉफ्ट सीएसएस संपत्ति है। डिफ़ॉल्ट 'mso-line-height-rule है: यादृच्छिक'? – MrMisterMan

+2

mso-line-height-rule मुझे बीमार बनाता है :( –

2

"एमएसओ-लाइन-ऊंचाई-नियम: बिल्कुल" जोड़ने के बाद, Outlook में काम करने के लिए लाइन-ऊंचाई के लिए लाइन-ऊंचाई से पहले, दशमलव मान के बजाय प्रतिशत का उपयोग करना सुनिश्चित करें (यानी 1.5 के बजाय 150%)

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