【发布时间】：2013-08-16 01:06:08
【问题描述】：
我遇到了一个 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 设置为右 - 问题就在于此（或者至少，你可以看到它）。
第一个图像向左移动（因此覆盖/隐藏了一些文本）。第二张图片（以及整个第二个列表项）很好。但是，当更改文本时，这会发生变化。似乎只有最长（即最宽）项目的图像保持在应有的位置 - 所有其他图像（如果您要创建更多项目）都会移动 - 这取决于列表项的宽度。
现在，为什么会这样 - 我该如何解决？
到目前为止我发现了以下几点：
- 设置
li { text-align: left; }时，图像在两个文本部分之间保持正常 - 但我当然没有正确对齐。 - 从
#container中删除text-justify时，图像也保持正常。 - 将
text-justify设置为auto或none似乎不起作用...
再说一遍：这只是关于 Internet Explorer (9+)。
// 编辑
为了避免你把时间花在我不感兴趣的事情上，我会发布更多关于我想要拥有的东西。
最终代码必须
- 保持当前/所需功能（即合理对齐）；
- 适用于所有主流浏览器（当前版本和至少一个之前的版本）。
最终代码不得
- 包含浮动；
- 包含绝对/相对位置。
// 编辑
这是所需结果（Firefox）的屏幕截图，也是我在 IE 中得到的结果之一......
【问题讨论】：
-
我没有 IE，所以我可能应该闭嘴.. 但在过去，我与 IE 和最奇怪的东西打架。这很遥远；不要抱有希望，但一些 IEhassle 解决了 margin:0, padding: 0 和 float （即使你覆盖它）。因为我无法测试它......好吧。两便士。
-
你试过
zoom: 1;吗？它会在IE中触发hasLayout并修复IE中的大部分CSS特定问题。 -
@MarkusHofmann 是的，我做到了——没有运气。但是感谢您的提示和（looong）文章。我从来没有见过这么多关于 hacky IE 的内容。 ;)
-
是的。想象一下开发人员花费在 hacking IE 上的所有时间。一个真正工作的新浏览器（关于 IE 的大量错误）可能已经建成。
-
@tf 我在 IE 中看到相同的结果，但不知道问题所在，你能插入图片吗？
标签： css internet-explorer text-align