Satır yüksekliği, Outlook 2010'da HTML için çalışmıyor E-posta

Question

Outlook 2010/Outlook 2007, HTML E-postamda herhangi bir satır yüksekliğini onurlandırıyor gibi görünmüyor. (Outlook 00 ve Outlook 03'te mükemmel çalışır)

Bazı kapsamlı çalışmalar yapıyorum - ve Outlook 2010/2007'nin satır yüksekliğini anlaması gerektiğini belirttiğim HTML CSS destek çizelgeleri yapıyorum.

Satır yüksekliğini blok ana öğesine ve alt paragraf öğesine ve baştaki stil etiketindeki bir kimliğe ve yukarıdakilerin her birleşimine eklemeye çalıştım.

Ayrıca, satır boyu yüksekliğini, metin boyutundan önemli ölçüde daha büyük bir piksel değeri olarak bildirdiğimi de sağladım (ancak% ve em'i denedim). Bildirimde önemli bir rol oynamayı denedim - ve hatta çevrimiçi bulabildiğim diğer tüm ipuçlarıyla birlikte valign denedim .... Hat yüksekliği kullanıyorum örn. Dolgu/kenar boşluğu için HTML E-posta desteği çok yorucu olduğundan, düğme altlığı ve dolgu altını belirleyin.

Bu konuda herhangi bir yardıma gerçekten değer veriyorum. Gerçekten kafa patlatma noktasında!

Gerçek e-posta, karmaşık bir bülten olduğu için çok büyük, ancak burada, kafadaki stilin bir pasajı ve satır yüksekliğinin çalışmadığı bir tablo bölümü - Umarım yeterlidir !:

<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 --> 

Answer 1

Outlook, html'yi oluşturmak ve düzenlemek için html işlemcisini kullanır. Tablo mizanpajlarına alışın ve css'yi unutun ve eğer - sadece satır içi css kullanın. arka plan, yazı tipi-aile, font.size, renk: sadece birkaç olasılık var.

Desteklenen css'in tam listesi here bulunabilir, bir eğitim sürümü here.

Ama aynı zamanda alıcıları düşünmek zorunda - onlar google posta veya Yohoo mail eğer css tamamen

e-posta haber geliştirmek için iyi bir kaynaktır campaignmonitor.com/resources, bunlar dışarı soyulmuş edilebilir Ayrıca, tüm e-posta hizmetlerinin ve HTML/CSS özelliklerinin yinelenen bir denetimini gerçekleştirme

Answer 2

Tablo hücresindeki satır içi css kullanarak line-height'un ayarlanması iyi olmalıdır, ancak buradaki <p> etiketlerine gerçekten ihtiyacınız yoktur. biçimlendirme sorunları veiçinde <style> etiketlerindeki <p> etiketlerine yapılan başvurular Bir dizi müşteri tarafından yok sayılmalıdır.

Answer 3

Geç yanıt, ancak son zamanlarda Outlook'ta benzer bir satır yüksekliği sorunuyla çalıştığım için, hacky geçici çözümümü paylaşmak istedim.

Herhangi bir nedenle, satır yüksekliğini belirttiğiniz etiketin CLOSING etiketinin hemen öncesinde HTML'ye sırasız bir liste atıyorsanız, Outlook 2010, satır yüksekliğine uyar.

Sen sırasız liste boş ve invisble yapabilirsiniz:

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

Örnek:

<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> 

Destek Ben etraflıca bu test etmedim. Şablonumda Outlook 2010'da bir ESP, Gmail'in şu andaki sürümü (27 Temmuz 2012) ve iPhone e-posta uygulamasında çalışır.Hile, diğer etiketlerde satır yüksekliği sorununu evrensel olarak düzeltip düzeltmediğini bilmiyorum. Ayrıca bir cludgey düzeltmesini kabul ediyorum, ama bu bir cludgey problemi; ve çoğu zaman, Outlook'un HTML özellikleriyle ilgili göz ardı edilen ihmalkarlığı olduğu gibi, düzeltme genellikle sorun kadar aptalcadır. İsterseniz kullanın, ancak gerçek alıcılara göndermeden önce kapsamlı olarak test edin.

Answer 4

Outlook, yüzde cinsinden belirtilen satır yüksekliğini destekler. Örneğin hat yüksekliği: 1.1 desteklenmiyor, ancak satır yüksekliği:% 110.

Answer 5

Ben çizgi yüksekliği kontrol etmek satır içi CSS bir arada kullanın:

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

unsur Microsoft tescilli CSS niteliği, mso-line-height-rule: exactly; olduğunu. Dolgu, paragraf etiketlerinin gereksiz alan yaratmasını önler.

Answer 6

Outlook'ta çalışmak için satır yüksekliğinde, "mso-line-height-rule: tam olarak; Satır yüksekliğinden önce, ondalık değer yerine yüzdeyi kullandığınızdan emin olun (ör. 1.5 yerine% 150)