在我解释之前,这里是示例HTML 代码:
<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:
有没有办法解决这个问题?希望我足够清楚。谢谢!