inline-blockプロパティとの互換性

<br />1年前、インターネット上にはinline-blockプロパティに関する記事はありませんでした。このプロパティを皆さんにもっと理解してもらうために、当時の記事をまとめて「display:inline-blockを徹底的に理解する」という記事を作りました。
現在、inline-block 属性の使用に対する要望がますます高まっています。残念ながら、Firefox 3 ベータ、IE8 ベータ、Opera、Safari のみが inline-block 属性をサポートしています (注: 元々は Opera と Safari のみがサポートしていました)。ただし、IE6 と IE7 は hasLayout をトリガーすることでこれをシミュレートできます。Firefox 2 には -moz-inline-box と -moz-inline-stack のプライベート属性があります (この 2 つの属性の比較は Qin Ge の「display:inline-block の 2 つの適用例」から引用されています)。
実際のアプリケーションでは、-moz-inline-box は要素間の配置などの問題を抱えることになります。Firefox にも配置の問題を解決するためにプライベート属性 -moz-box-align がありますが、予測が難しく、問題も多くあります。相対的に言えば、-moz-inline-stack は inline-block に似た動作をし、Firefox3 でテストできます。ただし、-moz-inline-stack を使用する場合はバグがあります。display:-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; /*IEでhasLayoutをトリガー*/
*display:inline; /*IE で hasLayout がトリガーされると、ブロック要素を inline に設定すると、display:inline は display:inline-block と同じ効果を持つようになります*/
テキストインデント:-9999px;
*テキストインデント:0;
フォントサイズ:0;
line-height:0; /* テキストを非表示にする必要がある場合は、これらの 4 つの属性を使用できます*/
/* さらに、上のテキストを非表示にするには、より簡単な方法を使用できます: line-height: super large value; font-size: 0; */
overflow:hidden; /*オーバーフローコンテンツを非表示*/
vertical-align:middle; /* Opera の大きな偏差のために行を垂直中央に配置する*/
幅：？ px; /*?自動でない値*/
身長：？ px; /*?自動でない値*/

<<: Nginx サーバーが Systemd カスタムサービスプロセス分析を追加

>>: XHTMLにおけるH1タグの位置について