我遇到了一个特定于 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 设置为右 - 问题就在于此（或者至少，你可以看到它）。
第一个图像向左移动（因此覆盖/隐藏了一些文本）。第二张图片（以及整个第二个列表项）很好。但是，当更改文本时，这会发生变化。似乎只有最长（意味着最宽）项目的图像保持在应有的位置 - 所有其他图像（如果您要创建更多项目）都会移动 - 取决于列表项的宽度，也就是说。
现在，为什么会这样 - 我该如何解决？
到目前为止，我发现了以下几点：
- 设置
li { text-align: left; }图像时，两个文本部分之间的图像保持良好 - 但我当然没有正确对齐。 text-justify从图像中删除时#container也保持良好。- 设置
text-justify为auto或设置none似乎不起作用...
再一次：这只是关于 Internet Explorer (9+)。
// 编辑
为了避免你把时间花在我不感兴趣的东西上，我会发布更多关于我想要的东西。
最终代码必须
- 保持当前/期望的功能（即合理对齐）；
- 适用于所有主流浏览器（当前版本和至少一个之前的版本）。
最终代码不得
- 包含浮动；
- 包含绝对/相对位置。
// 编辑
这是所需结果 (Firefox) 的屏幕截图，也是我在 IE 中得到的结果之一...
