インラインブロック属性_HTML/Xhtml_Webページ制作の互換性

1 年前、インターネット上に inline-block 属性に関する記事はありませんでしたが、この属性をより深く理解できるように、「表示: Inline-block の詳細を理解する」という記事を要約してまとめました。その時。
現在、inline-block 属性の使用に対する需要が高まっていますが、残念なことに、Firefox3 ベータ版、IE8 ベータ版、Opera、Safari のみがまだ inline-block 属性をサポートしています (注: 当初は、Opera と Safari のみがこれをサポートしていました。 )、ただし、IE6、IE7 は、hasLayout をトリガーすることでシミュレートできます。Firefox2 には、-moz-inline-box および -moz-inline-stack プライベート属性があります (これら 2 つの属性の比較は、Qin Ge の「表示のアプリケーションの 2 つの例」から引用されています)。 :インラインブロック")。
実際のアプリケーションでは、-moz-inline-box には要素間の位置合わせなどの問題が発生します。Firefox には位置合わせの問題を解決するためのプライベート属性 -moz-box-align もありますが、問題が発生することを予測するのはまだ困難です。多くの問題があり、比較的一般的に言えば、-moz-inline-stack は Firefox3 でテストできる inline-block に似た動作をします。ただし、-moz-inline-stack; 要素の外側の要素が display:inline; の場合、その要素に含まれるリンクは Firefox でクリックできなくなります。それを解決するには、position:relative; を使用します。
シミュレートした最終コードは次のとおりです。
display:inline-block; /*Firefox3 ベータ、IE8 ベータ、Opera、Safari サポート、IE でインライン要素をトリガーする hasLayout*/
display:-moz-inline-stack; /* Firefox のプライベート プロパティ-moz-inline-box */ も使用できます
zoom:1; /*hasLayout が IE でトリガーされる*/
*display:inline; /*hasLayout が IE でトリガーされると、ブロック要素を inline に設定すると、display:inline 効果が表示と同様になります。インラインブロック */
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* テキストを非表示にしたい場合は、次のようにします。これら 4 つの属性 */
/*さらに、上記のテキストを非表示にするために、より単純な方法を使用することもできます。
overflow:hidden; /* オーバーフローコンテンツを非表示にする */
vertical-align:middle; /* Opera の偏差が比較的大きいため、行を垂直方向に中央揃えします */
幅:?ピクセル; /*?自動以外の値*/
高さの場合:?ピクセル; /*?自動以外の値の場合*/