シミュレーション互換性のためのインラインブロック属性_エクスペリエンス交換

現在、inline-block 属性を使用する需要が高まっていますが、残念ながら、inline-block 属性をサポートしているのは Firefox3 ベータ、IE8 ベータ、Opera、Safari だけです (注: 当初は Opera と Safari のみがサポートしていました)。 Firefox2 には、-moz-inline-box および -moz-inline-stack プライベート属性があります (これら 2 つの属性の比較は、Qin Ge の「Display:inline-block のアプリケーションの 2 つの例」から引用されています) ")。

実際のアプリケーションでは、-moz-inline-box は要素間の位置合わせなどの問題を引き起こす可能性があります。Firefox には位置合わせの問題を解決するためのプライベート属性 -moz-box-align もありますが、まだ予測は困難です。多くの問題があること、そして比較的言えば、-moz-inline-stack は Firefox3 でテストできる inline-block に近い動作をします。ただし、-moz-inline-stack を使用する場合、display:-moz-inline-stack; 要素の外側の要素が display:inline; の場合、それに含まれるリンクが Firefox でクリックできなくなるというバグもあります。これを解決するには、position:relative; を使用する必要があります。

シミュレートした最終コードは次のとおりです。