title: Is there a CSS workaround for Firefox' bug: inline-block + first-letter with changed size
body: <p>It's better to see a bug for yourself in Firefox: <a href="http://jsfiddle.net/kizu/btdVd/" rel="noreferrer">http://jsfiddle.net/kizu/btdVd/</a></p>
  
  <p>The picture, showing the bug:</p>
  
  <p><img src="https://i.stack.imgur.com/4Muvp.png" alt="enter image description here"></p>
  
  <p>And the bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=385615" rel="noreferrer">filled in 2007 on bugzilla</a>.</p>
  
  <p>The bug appears when you're adding <code>::first-letter</code> pseudo-element with <code>display: inline-block</code>, and then change the <code>font-size</code> of this <code>first-letter</code>.</p>
  
  <p>More letters in a word after the first: more extra space added (or subtracted — if the font-size is lesser than block's).</p>
  
  <p>Adding <code>float: left</code> to the <code>first-letter</code> inverts the bug: with bigger font-size the width of <code>inline-block</code> shrinks.</p>
  
  <p>So, the question: is there any CSS-only workaround for this bug? It's somewhat killing me.</p>