如何防止IE删除“空”文本节点

Question

I've build a navigation using the text-justify method with inline-block child elements and it all works great everywhere except IE. Because of HTML minification that I don't have control over, I added a space character (   ) between the child elements, which makes the justification actually work. Now, I cannot figure out how to make IE leave that space node alone and not treat it as empty.

Example here: http://codepen.io/anon/pen/cAskd

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

ul {
  text-align: justify;
  font-size: 0;
  list-style: none;
  width: 50%;
  &:after {
    content: "";
    width: 100%;
    display: inline-block;
  }
  > * {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    height: 2em;
    background: gray;
    border: 1px solid red;
    font-size: 10px;
  }
}

Answer 1

From Justify Grid -

Internet Explorer has an issue with font-size: 0; causing whitespace to collapse instead of expanded by justify aligning. There are other ways to hide the pseudo-element like line-height: 0; but Justify Grid is using font-size because it's fixing a Chrome issue as well. Internet Explorer has an easy solution anyway, text-justify: distribute-all-lines ;

Forked pen with solution (tested in IE9+) -

http://codepen.io/clintioo/pen/ynvhK