@H_403_1@我碰到了一个特定于IE的问题,我无法解决这个问题.
@H_403_1@以下HTML和CSS可以直播in this pen.
@H_403_1@:: HTML
@H_403_1@
@H_403_1@:: CSS
@H_403_1@
/* 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; }
@H_403_1@所以有什么问题？
@H_403_1@绿色div的内容是合理的,而非div的每个孩子依次给出text-align：left;.那些孩子是：左假人和蓝色导航.
@H_403_1@导航包含一个列表(红色)和两个虚拟对象.对于红色列表的项目,text-align设置为right – 并且存在问题(或者至少在那里你可以看到它).
@H_403_1@第一个图像向左移动(因此覆盖/隐藏了一些文本).第二个图像(以及整个第二个列表项)很好.但是,在更改文本时,这会发生变化.看起来似乎只有最长(意义最宽)的项目的图像停留在它应该的位置 – 所有其他图像(如果你要创建更多的项目)被移位 – 取决于列表项的宽度,即.
@H_403_1@现在,为什么会如此 – 我该如何解决？
@H_403_1@到目前为止我发现了以下几件事：
@H_403_1@>设置li {text-align：left;图像在两个文本部分之间保持良好 – 当然,我没有正确对齐.
>从#container中删除text-justify时,图像也保持正常.
>将text-justify设置为auto或none似乎不起作用…
@H_403_1@再一次：这只是关于Internet Explorer(9).
@H_403_1@//编辑
为了避免你花在我不感兴趣的事情上的时间,我会发布更多关于我想拥有的东西.
@H_403_1@最终的代码必须
@H_403_1@>保持当前/所需的功能(即合理的对齐);
>在所有主流浏览器中工作(当前版本,之前至少有一个).
@H_403_1@最终的代码不能
@H_403_1@>包含浮子;
>包含绝对/相对位置.
@H_403_1@//编辑
这是所需结果(Firefox)的屏幕截图,以及我在IE中得到的结果之一…
最佳答案
