html - 位置绝对困惑Internet Explorer 8中的Bootstrap面包屑

这个问题其实很简单。这是我的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>

除了InternetExplorer8，所有浏览器的一切看起来都很好。这就是它呈现面包屑的方式：
您可以在this jsfiddle中亲自看到它。这只是结果帧，因为jsfiddle无法在IE8上正确呈现。整个小提琴位于this address（在URL中没有“show”部分的地址相同）。
无法正确渲染有两个原因：
position: absolute中的CSS指令.fixed-body
面包第一部分的空格Name with spaces
如果第一部分不包含空格或父节点的position未设置为absolute，则Internet Explorer 8会正确呈现面包屑。
我试图将面包屑包在另一个div中，并将其position重置为static，但这没有帮助。Internet Explorer 8是否有任何特定的限制以这种方式显示？最有趣的是，有没有办法解决或解决这个问题？
编辑（从我的回复中复制）：
只是偶然发现了正确的解决方法。在breadcrumb中用inline-block覆盖inline可以在没有任何副作用的情况下获得所需的效果（AFAIK）：

.breadcrumb > li {
    display: inline;
}

另请参见新版本的my fiddle，或仅打开show frame in IE8。

最佳答案

这是因为面包屑的宽度。。。
在IE8中检查此项：http://fiddle.jshell.net/azm53/12/show
我把面包屑宽度改成400像素了，没关系。

<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;
}

关于html - 位置绝对困惑Internet Explorer 8中的Bootstrap面包屑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17575298/