内联块元素的背景扩展到最大宽度，而不是内容 - 在IE7（Internet Explorer 7）中

Question

在我解释之前，这是 HTML代码：

的示例

[Demo on jsFiddle here.]

<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中的元素：

现代浏览器中的元素，例如最新版Chrome：

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

Answer 1

唯一的问题是IE7不理解display: inline-block非自然内联的元素，例如p。 You can make it work using this：

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

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