title: Workarounds for avoiding inconsistent line height with fractional pixels in Firefox
body: <p>Situation: I want to display some text (or font icon) within a fixed height box. I can assume this will always fit on one line, so can simply use line-height to control the centering.</p>
  
  <p>This works perfectly and shows two such boxes under each other:</p>
  
  <pre><code>&lt;div class="box"&gt;a&lt;/div&gt;
  &lt;div class="box"&gt;a&lt;/div&gt;
  
  .box {line-height:32px;width:32px;text-align:center;background:red;margin-bottom:5px;font-family:Arial,Helvetica,sans-serif;}
  </code></pre>
  
  <p><a href="https://jsfiddle.net/zj55racg/1/" rel="nofollow noreferrer">https://jsfiddle.net/zj55racg/1/</a></p>
  
  <p>Now, change the 5px vertical margin to 1.5px:</p>
  
  <p><a href="https://jsfiddle.net/jwg2ok3f/" rel="nofollow noreferrer">https://jsfiddle.net/jwg2ok3f/</a></p>
  
  <p>In Chrome, I get the same nice-looking result. In Firefox however, the second box has the text visibly lower relative to the red box and does not look nicely centered at all.</p>
  
  <p>Now while you would never use fractional pixel margins directly in the CSS, there is invariably text with a percentage line height, or responsive images, etc, throughout the page that results in fractional pixels being introduced. This means half the buttons throughout my page look nice; the other half look quite bad - the different is very noticeable.</p>
  
  <p>Are there any ways the rendering can be worked around?</p>
  
  <p>Image of what I see in case others can't replicate - the second a is a whole pixel lower in the red box than the first.</p>
  
  <p><a href="https://i.stack.imgur.com/dDVhD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dDVhD.png" alt="enter image description here"></a></p>