0

在我解释之前,这里是示例HTML 代码

[这里的 jsFiddle 演示。]

<div class="righty">
    <p id="breadcrumbs">
        <a href="http://example.com">Nerd Archive</a> » <a href="http://example.com/how-to/">Coding</a>
    </p>
</div>​

和 CSS

#breadcrumbs {
  font-size: 11px;
  font-weight: bold;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
  background: #D9ECFF;
  padding: 1px 3px;
}

max-width 属性似乎与 IE7 非常兼容,但是应该填充元素内容宽度的元素的背景(在本例中为面包屑)在 IE7 中扩展到全角。下面是截图对比:

IE7 中的元素:

IE7中的最大宽度元素

现代浏览器中的元素,例如最新版本的 Chrome:

现代浏览器中的最大宽度元素

有没有办法解决这个问题?希望我足够清楚。谢谢!

4

1 回答 1

2

唯一的问题是 IE7 无法理解display: inline-block非自然内联的元素,例如p. 您可以使用它使其工作

display: inline-block;
*display: inline;
zoom: 1;

http://jsfiddle.net/thirtydot/s4DGB/4/

于 2012-04-07T03:48:20.083 回答