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 の max-width 要素

たとえば、最新バージョンの Chrome のモダン ブラウザーの要素:

最新のブラウザーの max-width 要素

これを修正する方法はありますか？私が十分に明確であることを願っています。ありがとう！

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 に答える