2

这个问题真的很简单。这是我的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 之外，所有浏览器中的一切看起来都很好。这就是它呈现面包屑的方式：

Bootstrap 的面包屑导航的 IE8 渲染

您可以在这个 jsfiddle中亲自查看。这只是结果帧，因为 jsfiddle 无法在 IE8 上正确呈现。整个小提琴都在这个地址（它是相同的地址，但 URL 中没有“显示”部分）。

无法正确渲染的原因有两个：

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

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

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

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

只是偶然发现了正确的修复方法。inline-block在面包屑中用inlinefor覆盖li会产生所需的效果，而不会出现任何副作用（AFAIK）：

.breadcrumb > li {
    display: inline;
}

另请参阅我的小提琴的新版本，或仅在 IE8 中打开显示框架。

4

2 回答 2

2

实际上，将displayto设置inline-block为与 ITChristian 给出的答案相似的结果：

.breadcrumb {
    display: inline-block;
}

然而，这两种解决方案都有一些问题。如果设置width为固定值，则站点将停止响应（面包屑不会随窗口调整大小）。当设置display为inline-block灰色背景时，会缩小以仅覆盖链接，在右侧留下一条白色条带。如果在设置为display100 % 之后，它会溢出右边框（因为宽度要占用父元素的 100%）。也许最简单的解决方案就是去掉空格？inline-blockwidth

编辑：

只是偶然发现了正确的修复方法。inline-block在面包屑中用inlinefor覆盖li会产生所需的效果，而不会出现任何副作用（AFAIK）：

.breadcrumb > li {
    display: inline;
}

另请参阅我的小提琴的新版本，或仅在 IE8 中打开显示框架。

于 2013-07-10T17:02:44.423 回答
2

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

在 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;
}
于 2013-07-10T16:05:42.337 回答