使用text-align justify/text-justify和right时的奇怪行为

Question

我碰到了一个特定于IE的问题,我无法解决这个问题.

可以在此笔中看到以下HTML和CSS .

:: HTML

<div id="container">
    <div class="dummy">Dummy</div>
    <nav>
        <div id="right">
            <ul>
                <li>Lorem ipsum <img src="http://placehold.it/80x40"> dolor sit amet.</li>
                <li>Anal natrach, ut vas petat, <img src="http://placehold.it/80x40"> doriel dienve.</li>
            </ul>
            <div class="dummy">Dummy</div>
            <div class="dummy">Dummy</div>
        </div>
    </nav>
</div>

:: CSS

/* RESET */
* { margin: 0; padding: 0; vertical-align: top; }
ul { list-style: none; }

/* MARKUP */
#container {
    line-height: 0;
    font-size: 0rem;
    text-align: justify;
    text-justify: distribute-all-lines;
}

#container:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#container > * {
    display: inline-block;
    line-height: 1;
    font-size: 1rem;
    text-align: left;
    text-justify: none; /* does not work */
}

#container nav {
    text-align: right;
}

#right > * {
    display: inline-block;
}

/* COLORS & STUFF */
#container { padding: 10px;  background: #cfc; }
.dummy { padding: 10px; background: #ffc; }
#container nav { padding: 10px; background: #ccf; }
ul { padding: 10px; background: #fcc; }

所以有什么问题？

绿色的内容div是合理的,而div反过来的每个孩子都给出了text-align: left;.那些孩子是:左假div人和蓝人nav.

它nav包含一个列表(红色)和两个假人.对于红色列表的项目,text-align设置为right - 并且存在问题(或者至少在那里你可以看到它).

第一个图像向左移动(因此覆盖/隐藏了一些文本).第二个图像(以及整个第二个列表项)很好.但是,在更改文本时,这会发生变化.看起来似乎只有最长(意义最宽)的项目的图像停留在它应该的位置 - 所有其他图像(如果你要创建更多的项目)被移位 - 取决于列表项的宽度,即.

现在,为什么会如此 - 我该如何解决？

到目前为止我发现了以下几件事:

• 当设置li { text-align: left; }图像在两个文本部分之间保持正常 - 当然,我没有得到正确的对齐.
• text-justify从#container图像中删除时也保持正常.
• 设置text-justify为auto或none 似乎不起作用......

再一次:这只是关于Internet Explorer(9+).

//编辑
为了避免你花在我不感兴趣的事情上的时间,我会发布更多关于我想拥有的东西.

最终的代码必须

• 保持当前/所需的功能(即合理的对齐);
• 在所有主流浏览器中工作(当前版本,之前至少有一个).

最终的代码不能

• 包含浮子;
• 包含绝对/相对位置.

//编辑
以下是所需结果(Firefox)的屏幕截图,以及我在IE中获得的结果之一...

Answer 1

更改您text-justify的分发（已在 IE10、IE9、Chrome、FF 中测试）：

text-justify: distribute;

查看codepen以查看它的运行情况。