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

【问题标题】：How to prevent IE from removing an "empty" text node如何防止 IE 删除“空”文本节点
【发布时间】：2014-11-04 16:23:44
【问题描述】：

我已经使用带有 inline-block 子元素的 text-justify 方法构建了一个导航，它在除 IE 之外的任何地方都运行良好。由于我无法控制 HTML 缩小，我在子元素之间添加了一个空格字符 (&nbsp;)，这使得对齐实际上起作用。现在，我不知道如何让 IE 不理会那个空间节点而不把它当作空。

此处示例：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;
  }
}

【问题讨论】：

标签： html internet-explorer css justify

【解决方案1】：

来自Justify Grid -

Internet Explorer 的 font-size: 0; 存在问题，导致空格折叠而不是通过对齐对齐来展开。还有其他方法可以隐藏伪元素，例如line-height: 0;，但 Justify Grid 使用的是 font-size ，因为它也修复了 Chrome 问题。无论如何，Internet Explorer 都有一个简单的解决方案，text-justify: distribute-all-lines；

带有溶液的分叉笔（在IE9+中测试）-

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

【讨论】：

哇，我在寻找答案时完全没有发现这个问题，谢谢！