IEの表示インラインブロック

Firefoxで今

<div style='width: 200px; border: 1px solid black;'> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;'> 
    asdfasdf<br />asdf 
    </div> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;'> 
    asdfasdf<br />were 
    </div> 
</div>

とクロームそれがうまく表示されますが、インターネットエクスプローラ8にはそれがないようにやっています。レイアウトに問題がないようにレイアウトされており、幅は1行に収まるように十分に小さくなっています。

私が使用している場合は、スパンの代わりにそれない仕事、しかし私は本当にのdivのはinline-block要素にデフォルトでblockをしている要素を切り替えることはできませんIE

出典

2011-07-15 csteifel

あなたの文書はdoctype宣言を持っていますか？ – BoltClock

「それはうまくいかないのですか？あなたの望む効果は何ですか？ – Kyle

Ahhh okまあ、XHTMLやHTML5ではなく非常に古いページからHTML 4が宣言されました – csteifel

を試してみてください。

インライン要素にinline-blockが機能する理由は、それが原因でhasLayoutがトリガーされるためです。そして、インライン要素のレイアウトはのようになります。はinline-blockのようになります。

ブロックレベルの要素でinline-blockを動作させるには、インラインにしてhasLayoutのようにzoom: 1をトリガーします。

コードのために、divをspanに変更するか、インラインハックを追加します（またはコードを外部スタイルシートに移動して条件付きコメントを使用する）。インラインハックとバージョンは次のようになります。ドキュメントの種類を変更する

<div style='width: 200px; border: 1px solid black;'> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'> 
    asdfasdf<br />asdf 
    </div> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'> 
    asdfasdf<br />were 
    </div> 
</div>

出典

2011-10-01 21:08:37 kizu

IE9ではWin XPのCSSハックが機能しませんでした。 – Piero

IE < 8での仕事をいけない理由konwしたいと思います。どんなに頑張っても、float IIRCを使用しない限り、常にblockのままです。

この例では、<div>を使用する必要はありません。このような場合は、デフォルトでまたはinlineの要素を使用しないでください。それ以外の場合は、floatingが答えです。

出典

2011-07-15 10:29:06 Mig

これは当てはまりません。 IE8は_inline-block_表示モードをうまく理解しています。しかしIE7はそのモードを完全に知らない。 displayを_inline_に設定し、その要素（_zoom_プロパティなど）のレイアウトを強制することで、_inline-block_の動作をエミュレートできます。 – oddy

そうです。 IE8は 'inline-block'で正しく動作するようですが、私は自分の答えを更新します。 – Mig

IE8は、親コンテナを拡大または縮小させるインラインブロック内の要素を隠したり表示したりするまで、インラインブロックでうまく動作します。 – ScubaSteve

は、IEの古いバージョンでは、ブロックレベル要素のためのinline-blockを理解していないこの

<style type="text/css"> 
.one { 
    width: 200px; 
    border: 1px solid black; 
} 
.two { 
    display: -moz-inline-box; 
    display: inline-block; 
    width: 70px; 
    border: 1px solid green; 
} 
* html .two { 
    display: inline; 
} 
* + html .two { 
    display: inline; 
} 
</style> 
<div class="one"> 
    <div class="two"> 
    asdfasdf<br />asdf 
    </div> 
    <div class="two"> 
    asdfasdf<br />were 
    </div> 
</div>

出典

2011-09-28 15:54:47 HerrSerker

はIE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

出典

2013-09-18 15:15:15 user2792101

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

のために働いて、あなたは他のブラウザのためではなく、あなたができるIE用インラインブロックを追加することができます*でスタイルを追加する。それはつまりでのみ動作します

出典

2014-02-15 15:55:31 GeniusJRS

IEの表示インラインブロック

答えて

関連する問題