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

Question

我遇到了一个特定于IE的问题，我无法解决这个问题。

以下HTML和CSS可以直播in this pen。

:: 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以查看其实际效果。

Answer 2

你试过这样的设定吗？

li img{display: inline-block; margin: 0 5px;} /*you could set margin: 1px; only*/

your code pen