title: Same CSS producing different font sizes on different pages
body: <p>I am trying to create CSS for a small-screen view of my web application, and I'm running into maddening font-size issues. Here's the scenario.</p>
  
  <p>I have a class, lets call it .noListItemsWords.</p>
  
  <pre><code>.noListItemsWords {
     font-size: 80%;
  }
  </code></pre>
  
  <p>The only parent anywhere up the DOM from this on both pages that sets the font-size is body, which has a font-size of 24pt.</p>
  
  <p>On page one, the browser is rendering this element with a font-size of 47.7681px:
  <a href="https://i.stack.imgur.com/LFFPy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LFFPy.png" alt="browser rendering of the element on page 1"></a></p>
  
  <p>On page two, the browser is only rendering this at font-size of 32px:
  <a href="https://i.stack.imgur.com/NME18.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NME18.png" alt="browser rendering of the element on page 2"></a></p>
  
  <p>Why does this happen? Is there any way to deal with it?</p>
  
  <p>EDIT:
  Showing that using a base percentage on my body tag and rem units for my font does not fix the issue:</p>
  
  <p><a href="https://i.stack.imgur.com/BGnS1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BGnS1.png" alt="page one using rem"></a>
  <a href="https://i.stack.imgur.com/2rutg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2rutg.png" alt="page two using rem"></a></p>
  
  <p>Tested in Google Chrome 57</p>