title: css line-height rendering differently in IE, Safari and Chrome
body: <p>Pre word: initially I kept in mind only Windows, but after a while testing on Mac Air, realized it is even worse there. Though in real code it is not such a hassle, although there is some inconsistency.</p>
  
  <p>here is the test
  <a href="http://jsbin.com/ehegaj/6/edit" rel="nofollow noreferrer">http://jsbin.com/ehegaj/6/edit</a></p>
  
  <p>In short, what's going on. I have headers where I applied <code>line-height</code> property, this is always one line headers so I locked up the height just to be right fit for fonts. In different browsers (and OSs) you could see text lays differently. Is any ideas how to work it out?</p>
  
  <p>UPD: here <a href="http://jsbin.com/uzucuf/1/edit" rel="nofollow noreferrer">http://jsbin.com/uzucuf/1/edit</a> is very close example of the real work I do, again it is not such a bad as sample test above, but still there is moving pixels.</p>
  
  <p>UPD2:</p>
  
  <p>Did more tests focusing mostly on Windows 7, and there is included image with the test screenshots into the different browsers with different line heights. you could see visually inconsistency between them. </p>
  
  
  <img src="https://i.stack.imgur.com/5gvFv.png" />
  
  
  
  <p>It is about 1px, so practically I could fix it by using line heeight 29px and serving different line height 30px to the IE. Although I just would leave it with 30px line height and ignoring safari, So at this point I am good.</p>
  
  <p>So just curious why that happened? Forcing by this eager was spend couple hours browsing different resources:</p>
  
  <p><a href="https://stackoverflow.com/questions/4474636/is-it-possible-to-achieve-line-height-consistency-in-all-browsers">This guy</a>, looks got the same issue, but was just get rid of finding question why.</p>
  
  <p><a href="https://makandracards.com/makandra/859-cross-browser-height-and-line-height" rel="nofollow noreferrer">Other person</a> suggested use only even values for <code>line-height</code> which is little bit odd at my point of view:) Please correct me if I do wrong here.</p>
  
  <p><a href="https://web.archive.org/web/20130331072943/http://www.giantisland.com:80/Resources/CSSLineHeightUnits.aspx" rel="nofollow noreferrer">Some other</a> but bit unrelated topic was just quite interested to read on.</p>
  
  <p><a href="https://web.archive.org/web/20140705031318/http://www.webfonts.info:80/node/330" rel="nofollow noreferrer">And finaly</a>, looks I find out the answer, it is bit blurry but in fact makes some sense.</p>
  
  <blockquote>
    <p><b>1. Three sets of linespacing values</b><br>
    For obscure reasons rooted in the history of the TrueType and OpenType font formats, every webfont carries three sets of linespacing values.</p>
    
    <p>The “old Mac” set, introduced in System 7. In the old Mac OS, if a glyph reached above or below the “old Mac” linespacing lines, the glyph would be squeezed vertically to fit in.</p>
    
    <p>The “old Windows” set, introduced in Windows 3.1, wherein any part of the outline that went above or below the “old Windows” ascender and descender lines would not appear on screen (so the glyphs would be cropped).
    A “typographic” set, supposedly free of the limitations of the other two sets.</p>
    
    <p>The problem, however, is that many Windows applications still use the “old Windows” values. Often this is done intentionally to prevent reflow from documents created with older applications. On Mac OS X, the squeezing does not happen but most applications still use the “old Mac” values.</p>
    
    <p>This baggage has been brought over into browsers. Chrome on Mac OS X uses a different set of values than Chrome on Windows; Firefox on Windows 7 uses a different set of values than Firefox on Windows XP, and Firefox on Windows 7 uses a different set of values than Chrome on Windows 7. Mac and Windows versions of the same browser will use different sets of values, while different browsers on the same OS may use different values as well! In an ideal world, the simple solution would be for font foundries to make sure all three sets of values lead to the same result. But many of the existing fonts were created before webfonts were conceived, and font creation tools don’t make it easy for type designers to make these values “right”.</p>
    
    <p>In short: there are many fonts out there in which the linespacing values lead to inconsistencies across operating systems and across browsers.</p>
  </blockquote>
  
  <p>But still I am not 100% sure that's the case. May be someone make better guess and give more clear answer, just like explanation for child:)?</p>