2

次のコードを検討してください。

HTML：

<div>Hello</div>
<div>Stack</div>
<div>Overflow</div>

CSS：

div {
    display: inline-block;
    zoom: 1;
    *display: inline;
    background-color: #ccc;
}

IE8やその他の最新のブラウザーでは、次の間にスペースがありますdiv。

ここに画像の説明を入力してください

ただし、IE7では、divsは互いに隣接しています。それらの間にスペースはありません。

IE7にこのスペースがあることをどのように確認できますか？

4

4 に答える 4

2

IE7以下の場合にのみ、自分でスペースを追加できます。

div {
    display: inline-block;
    zoom: 1;
    *display: inline;
    *margin-right: 0.25em;
    background-color: #ccc;
}

またはこのように：

div + div {
    *margin-left: 0.25em;
}
于 2012-11-21T23:47:45.080 に答える
1

スペース/インラインブロックの問題の背景は次のとおりです。http：//css-tricks.com/fighting-the-space-between-inline-block-elements/

したがって、これらの修正の1つを実装して（スペースを削除するため）、マージン値を指定できます。または、単にそれらをフロートさせて、代わりにマージン値を指定することができます。

div {
    background-color: #ccc;
    float: left;
    margin-right:5px;
}
于 2012-11-21T23:39:49.390 に答える
0

IE7は、インラインブロックを部分的にのみサポートしています。基本的に、IE6およびIE7は、デフォルトで「インライン」と表示される要素でのみインラインブロックをサポートします。

Divsのデフォルトの表示はブロックであるため、IE7はインラインブロックを無視し、インラインのみを読み取るため、スペースの問題はありません。

これを修正するには、要素間に改行なしの空白（&nbsp;）を追加してみてください。ただし、古いブラウザと新しいブラウザの間では、要素間のスペースが大きくなるため（&nbsp;+マージン）、動作に一貫性がなくなります。

于 2012-11-21T23:47:56.610 に答える
0

IE7（およびそれ以前）は、テキストが前に付いている場合、「インラインブロック」要素の前にスペース（マークアップに空白がある場合）を挿入するようです（改行しないスペースでもかまいません）。そのテキストにある場合でもdisplay:none;（ただし、「inline-block」の後に続くテキストの前にスペースは挿入されません）。

したがって、クロスブラウザを一貫してレンダリングするOPの解決策は、HTMLを次のように変更することです。

<div>Hello</div>
<!--[if lte IE 7]><span style='display:none;'>&nbsp;</span><![endif]-->
<div>Stack</div>
<!--[if lte IE 7]><span style='display:none;'>&nbsp;</span><![endif]-->
<div>Overflow</div>
于 2016-05-12T23:14:52.593 に答える