css - 使用 text-align justify/text-justify and 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; .这些 child 是:左边的虚拟 div 和蓝色的 nav。

nav 包含一个列表(红色)和两个虚拟对象。对于红色列表的元素，text-align 设置为右对齐 - 这就是问题所在(或者至少，您可以在那里看到它)。

第一张图片向左移动(因此覆盖/隐藏了一些文本)。第二张图片(以及整个第二个列表项)没问题。但是，当更改文本时，这会发生变化。似乎只有最长(意味着最宽)元素的图像保留在应有的位置 - 所有其他图像(如果你要创建更多元素)都被移动 - 取决于列表元素的宽度，即。

现在，为什么会这样 - 我该如何解决它？

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

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

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

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

最终代码必须

• 保持当前/期望的功能(即对齐对齐)；
• 适用于所有主流浏览器(当前版本和至少之前的版本)。

最终代码不得

• 包含 float ；
• 包含绝对/相对位置。

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

Answer 1

更改您的 text-justify 以分发(在 IE10、IE9、Chrome、FF 中测试):

text-justify: distribute;

查看 codepen看到它在行动。