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

現在、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; を使用する必要があります。

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

コードをコピー コードは次のとおりです。

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 でトリガーされると、ブロック要素をインラインに設定します。display:inline の効果は、display:inline-block*/

text-indent:-9999px;
*text-indent:0;
font と同様になります。 -size:0;
line-height:0; /* テキストを非表示にする必要がある場合は、次の 4 つの属性を使用できます */
/*さらに、上記のテキストを非表示にするには、より単純化した方法: line-height: super big value; font-size: 0; */

overflow:hidden; /* オーバーフローの内容を非表示にする */

vertical-align:middle; / * Opera の偏差が比較的大きいため、行を垂直方向の中央に配置 */

width:?ピクセル; /*?自動以外の値*/
高さ:?ピクセル; /*?自動以外の値の場合*/