divに相当するIE8、IE7以前のブラウザのインラインブロック表示

Question

これはブラウザ間の互換性に関するかなり一般的な質問です。

デザインのさまざまな段階で私は（イメージを使用することなく）レイアウトとスタイルを実現するための唯一の方法として、CSSスタイルオプションdisplay:inline-blockを使用しています。しかし、これはIE8やその他の古いブラウザではサポートされていません。

私の質問には2つの部分があります 1 - IE8に似た効果を達成する方法はありますか？ 2 - そうでない場合、私のデザインをスムーズに劣化させるにはどうすればよいですか？

参考までに、これが私のデザインで使用されている場所の例です。

<div style="width:20px; height:20px; display:inline-block; background-color:rgb(200,120,120); margin-right:10px;"></div>Direct

チャートの色を説明するための20×20画素の色ブロックです。

この問題は、本文の中のテキストの特定のビットなどのより大きな書式設定&のレイアウトを制御したい場合に発生します。

私が現在取り組んでいる設計では、古いブラウザタイプのサポートは、キャンバス要素に大きく依存しているため、サポートを中止します。しかし、これは私が以前に何度か問題を遭遇したときに尋ねるのが良い質問になると思いました。ここで

おかげ

Answer 1

は、このトピックをカバーして良いリソースです：http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

基本的にIEは "hasLayout" と呼ばれるトリガーを持っています。これをトリガーすると、ブロックレベルの要素にdisplay:inline-blockを使用できます（デフォルトでは、IEではネイティブのインライン要素のインラインブロックのみが許可されます）。

さらに、古いバージョンのFire Foxはインラインブロックもサポートしていませんでしたが、「インラインスタック」値（moz-inline-stack）を持っていました。ここで

は、私の知る限り、クロスブラウザdisplay:inline-blockを取得するための最良の方法である：

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

Answer 2

使用このコード

*display: inline; 
*vertical-align: middle; 

Answer 3

here与えられたよう：

IEインラインブロックをサポートしますが、ネイティブに インラインの要素に対してのみサポートされます。あなたが本当にインラインブロックを使用したいのであれば、あなたは

はい...スパンとstrongsおよびEMSへ 制限している、それはあなたならばそれは問題ではない、通常ので、論理的ではありませんdivやspanを使用してください...しかし、覚えている - これはIEです:)

<div>から<span>に変更するだけです。

Answer 4

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

インラインブロックを他のブラウザに追加できますが、IEの場合は*でスタイルを追加できます。それはie内でのみ動作します