位置绝对会混淆Internet Explorer 8中的Bootstrap痕迹

Question

问题非常简单。这是我的CSS：

.fixed-body {
    position: absolute;
}

我的HTML：

<div class="fixed-body">
    <ul class="breadcrumb">
        <li class="active">Name with spaces<span class="divider">/</span></li>
        <li><a href="#">Home</a><span class="divider">/</span></li>
        <li><a href="#">Library</a></li>
    </ul>
</div>

除了Internet Explorer 8之外，所有浏览器中的所有内容都可以正常显示。这就是呈现Breadcrumb的方式：

您可以在this jsfiddle中自行查看。这只是结果帧，因为jsfiddle不能正确地在IE8上呈现。整个小提琴位于this address（它与URL中没有“show”部分的地址相同）。

有两个原因导致它无法正确呈现：

1. position: absolute
中的CSS指令.fixed-body
2. 包围Name with spaces
第一部分的空格

如果第一部分不包含空格或父节点的position未设置为absolute，则Internet Explorer 8会正确呈现面包屑。

我尝试将面包屑包装在另一个div中并将其position重置为static，但这没有帮助。是否有以这种方式显示的Internet Explorer 8的任何特定限制？最有趣的是，有没有办法解决这个问题？

编辑（从我的回复中复制）：

偶然发现正确的修复。在面包屑中覆盖inline-block inline li，可以获得所需的效果而不会产生任何副作用（AFAIK）：

.breadcrumb > li {
    display: inline;
}

另请参阅新版my fiddle，或只打开show frame in IE8。

Answer 1

这是因为“面包屑”宽度......

在IE8中检查：http://fiddle.jshell.net/azm53/12/show

我已将面包屑宽度更改为400px，这没关系。

<div class="fixed-body">
    <ul class="breadcrumb">
        <li class="active">Name with spaces<span class="divider">/</span>

        </li>
        <li><a href="#">Home</a><span class="divider">/</span>

        </li>
        <li><a href="#">Library</a>
        </li>
    </ul>
</div>

和CSS

.fixed-body {
    position: absolute;
}
.breadcrumb {
    width: 400px;
}

Answer 2

实际上，将display设置为inline-block会得到与ITChristian给出的答案类似的结果：

.breadcrumb {
    display: inline-block;
}

然而，这两种解决方案都存在一些问题。如果将width设置为固定值，则站点将不再响应（面包屑不会随窗口大小而变化）。将display设置为inline-block时，灰色背景会缩小至仅覆盖链接，并在右侧留下白色条带。如果在将display设置为inline-block后将width设置为100％，则会溢出右边框（因为宽度将占据父元素的100％）。也许最简单的解决办法就是摆脱空间？

修改

偶然发现正确的修复。在面包屑中覆盖inline-block inline li，可以获得所需的效果而不会产生任何副作用（AFAIK）：

.breadcrumb > li {
    display: inline;
}

另请参阅新版my fiddle，或只打开show frame in IE8。