Inline-block 元素的背景扩展到最大宽度，而不是与内容 - 在 IE7 (Internet Explorer 7)答案

【问题标题】：Inline-block element's background extends to max-width, and not with the content -- in IE7 (Internet Explorer 7)Inline-block 元素的背景扩展到最大宽度，而不是与内容 - 在 IE7 (Internet Explorer 7)
【发布时间】：2012-04-07 11:48:20
【问题描述】：

在我解释之前，这里是示例 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：

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

【问题讨论】：

你能发一个demo 来显示问题吗？
@thirtydot 好的，看看这个（也添加到问题中）：jsfiddle.net/s4DGB/3

标签： internet-explorer internet-explorer-7 css

【解决方案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/

【讨论】：

太棒了！非常感谢。