发表新帖
发表新帖

Line-height not working in Outlook 2010 for HTML Email

前端 未结
关注
7 572
小鲜肉
小鲜肉 2021-01-31 08:52

Outlook 2010/ Outlook 2007 does not appear to be honoring line-height whatsoever in my HTML Email. (It works perfectly in Outlook 00 and Outlook 03)

I\'ve been doing som

相关标签:
7条回答
  • 感情败类
    2021-01-31 09:28

    Outlook uses the word html processor for rendering and editing html. Get used to table layouts and forget about css, and if - use only inline css. you have just a few possibilities: background, font-family, font.size, color.

    a full list of supported css can be found here, a tutorial is here.

    But you also have to think about your receivers - if they are on google mail or yohoo mail your css can be stripped out completely

    a good resource for developing email newsletters is campaignmonitor.com/resources, they are also doing a repeatly check of all email services and their HTML/CSS features

    0 讨论(0)
  • 野性不改
    2021-01-31 09:30

    Late response, but since I recently worked through a similar line-height issue in Outlook, I wanted to share my hacky workaround.

    For whatever reason, if you throw an unordered list into the HTML just before the CLOSING tag of the tag you specified the line-height for, Outlook 2010 respects the line-height.

    You can make the unordered list empty and invisble:

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

    Example:

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

    Disclaimer: I haven't tested this exhaustively. It works in my template through one ESP in Outlook 2010, Gmail's current version (July 27, 2012), and the iPhone email app. I don't know if the trick universally fixes the line height issue in other tags. I also acknowledge its a cludgey fix, but it's a cludgey problem; and, as is often the case with Outlook's flagrant disregard for HTML specifications, the fix is often as stupid as the problem. Use this if you want, but test it extensively before sending to actual recipients.

    0 讨论(0)
  • 情书的邮戳
    2021-01-31 09:30

    The best approach for this problem is to use relative positioning and top property, this works like a charm, see example code below

    <div style="display: inline-block; ">
<font>Line 1</font><br/>
<font style="position: relative; top: -5px;">Line 2</font><br/>
<font style="position: relative; top: -10px;">Line 3</font><br/>
</div>
    0 讨论(0)
  • 甜味超标
    2021-01-31 09:36

    Setting the line-height using in-line css on the table cell should be fine but you really don't need those <p> tags in there, that just introduces formatting problems and the references to those <p> tags in the <style> tags in the <head> will be ignored by a number of clients.

    0 讨论(0)
  • 栀梦
    2021-01-31 09:37

    For line-height to work in Outlook, after adding "mso-line-height-rule: exactly;" before line-height, make sure to use percentage instead of decimal value (i.e. 150% instead of 1.5)

    0 讨论(0)
  • 野趣味
    2021-01-31 09:39

    Outlook supports line-height specified in percents. For example line-height: 1.1 isn't supported, but line-height: 110% is.

    0 讨论(0)
 看不清?
提交回复
热议问题