Css 使用文本对齐对齐/文本对齐和右对齐时的奇怪行为

我遇到了一个我就是想不起来的问题

下面的HTML和CSS可以实时查看

：：HTML 那么，有什么问题？ 绿色

div

的内容是对齐的，而非常

div

的每个子项依次给出

文本对齐：左。这些子对象是：左侧假人
div
和蓝色
nav

nav
包含一个列表（红色）和两个假人。对于红色列表的项目，文本对齐设置为右-这就是问题所在（或者至少，您可以在那里看到它）

第一个图像向左移动（从而覆盖/隐藏部分文本）。第二个图像（以及整个第二个列表项）很好。但是，当更改文本时，这会发生变化。看起来似乎只有最长（意味着最宽）项目的图像保持在它应该的位置-所有其他图像（如果要创建更多项目）都会移动-这取决于列表项目的宽度

现在，为什么会这样？我该如何修复它？

到目前为止，我发现了以下几点：


当设置
li{text align:left；}
时，图像在两个文本部分之间保持良好的对齐状态，但我当然没有正确对齐
从
#容器中删除
text justify
时，图像也会保持良好状态

将
text justify
设置为
auto
或
none
似乎不起作用

再一次：这只是关于Internet Explorer的（9+）

//编辑

为了避免你把时间花在我不感兴趣的事情上，我会在我想要的东西上再贴些东西

最后的代码必须


保持当前/所需的功能（即对齐）
在所有主要浏览器中工作（当前版本和至少一个之前的版本）

最后的代码不能


包含浮点数
包含绝对/相对位置

//编辑

这是一个期望结果（Firefox）的屏幕截图，也是我在IE中得到的一个

更改要分发的
文本（在IE10、IE9、Chrome、FF中测试）：

请查看以查看它的运行情况
 你试过这样设置吗

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

我没有IE，所以我可能该闭嘴了。。但在我与IE和最奇怪的事情搏斗的那些日子里。这是遥远的；不要抱太大的希望，但一些麻烦可以通过边距：0、填充：0和浮动（即使覆盖它）来解决。因为我不能测试它。。。好。两便士。您是否尝试过缩放：1？它触发了IE中的CSS，并修复了IE中大多数特定于CSS的问题。@MarkusHofmann是的，我做到了——运气不好。但是谢谢你的tipp和（looong）文章。我从来没见过这么多人读过黑客的东西对。想象一下开发人员花在入侵IE上的所有时间。一个新的浏览器实际上可以工作（考虑到IE大量的错误）可能已经构建出来了。@tf我在IE上看到了同样的结果，但不知道问题出在哪里，你能插入一张图片吗？正如我写的，我是专门为Internet Explorer提出这个问题的。我知道这是IE独有的属性——这就是问题所在，因为这对IE不起作用（至少不像预期的那样）。你想要的结果是什么？哪个浏览器正在显示您希望它的外观？我刚刚更新了CSS（在
伪元素之后添加了
：以在除IE之外的几乎任何其他浏览器中显示所需的行为/布局。那么所需的结果是什么？左边的一些文本，图片，右边的一些文本-所有这些都是右对齐的。更新了上面的答案以包含新的CSS，这是我在IE9中得到的。如果它产生了你想要的确切结果，这不是答案吗？你不能用你正在尝试的方法在IE中进行你想要的布局。在我的浏览器IE 8和firefox 22中的外观相同。
/* 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; }

text-justify: distribute;

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