如何防止IE刪除一個「空白」文本節點

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;這樣的僞元素，但是對齊網格使用的是字體大小，因爲它也修復了Chrome問題。無論如何，Internet Explorer有一個簡單的解決方案，text-justify: distribute-all-lines;

歧路筆解決方案（在IE9測試+） -

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