title: CSS Inherit and em-units not rendering properly
body: <p>I have some HTML</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Lorem ipsum&lt;/li&gt;
    &lt;li&gt;Lorem ipsum&lt;/li&gt;
    &lt;li&gt;Lorem ipsum&lt;/li&gt;
    &lt;li&gt;Lorem ipsum&lt;/li&gt;
    &lt;li&gt;Lorem ipsum&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And some css</p>
  
  <pre><code>body {font-size:2em}
  li {font-size:60%}
  li:nth-child(2){font-size:inherit}
  </code></pre>
  
  <p>And all is good</p>
  
  <p><img src="https://i.stack.imgur.com/ZNczn.png" alt="enter image description here"></p>
  
  <p>If I <strong>replace the li font-size with an em unit</strong> the inheritance breaks</p>
  
  <pre><code>body {font-size:2em}
  li {font-size:1em}
  li:nth-child(2){font-size:inherit}
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/1NqKI.png" alt="enter image description here"></p>
  
  <p>What, o dear gods of css, may cause this?</p>
  
  <p>See fiddle here, <a href="http://jsfiddle.net/3ho1uc3u/" rel="noreferrer">http://jsfiddle.net/3ho1uc3u/</a></p>