インラインブロック要素の背景には、コンテンツにない最大幅まで伸び、および - 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

唯一の問題は、pのように、IE7が自然にインラインではない要素のdisplay: inline-blockを理解できないことです。 You can make it work using this：

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

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