Question

我使用带有内联块子元素的text-justify方法构建导航，除了IE之外，它在所有地方都很有效。由于我无法控制的HTML缩小，我在子元素之间添加了一个空格字符（ ），这使得理由实际上起作用。现在，我无法弄清楚如何让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;
  }
}

Answer 1

来自Justify Grid -

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

带解决方案的分叉笔（在IE9 +中测试） -

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

如何防止IE删除＆＃34;空＆＃34;文本节点

1 个答案: