1年前、インターネット上のインラインブロック属性に関する記事はありませんでした。すべての人が属性をよりよく理解するように促進するために、私は記事「深さ:ディスプレイの詳細な理解:インラインブロック」を要約して編集しました。
現在、インラインブロック属性の適用に対する需要が高まっています。残念ながら、Firefox3ベータ、IE8ベータ、オペラ、およびSafariのみがインラインブロック属性をサポートします(注:オペラとサファリのみがそれらをサポートしています)が、IE6とIE7はHaslayoutをトリガーすることでシミュレートできます。 Firefox2には、-moz-inline-line-boxおよび-moz-inline-lineスタックプライベート属性があります(これらの2つの属性の比較は、Qin GEの「ディスプレイの適用の2つの例:インラインブロック」から引用されています)。
実際のアプリケーションでは、Moz-Inline-Boxには、要素間のアラインメントなどの問題があります。 Firefoxには、アラインメントの問題を解決するための私有財産-MOZ-Box-Alignもありますが、多くの問題を予測することは依然として困難です。比較的言えば、-moz-inlineスタックは、firefox3でテストできるインラインブロックのように機能します。ただし、-moz-inlineスタックを使用すると、バグもあります。ディスプレイの外側要素の場合:-moz-inlineスタック;表示されます:インライン;これにより、Firefoxに含まれるリンクが競争できなくなり、これは位置によって解決する必要があります。
シミュレートした最終コードは次のとおりです。
ディスプレイ:インラインブロック。 /*firefox3ベータ、IE8ベータ、オペラ、サファリサポート、haslayout IEの下でインライン要素をトリガーする*/
ディスプレイ:-moz-inline-stack; / * Firefoxのプライベート属性、-moz-inline-box */を使用することもできます。
ズーム:1; /*ieトリガーhaslayout*/
*表示:インライン; /*haslayoutがIEでトリガーされると、ブロック要素をインラインに設定すると、表示が表示されます。
テキストインデント:-9999px;
*テキストインデント:0;
フォントサイズ:0;
Line-Height:0; /*テキストを非表示にする場合、これらの4つの属性を使用できます*/
/*さらに、上に隠されたテキストを隠すことができ、より単純化された方法を使用できます。フォントサイズ:0; */
オーバーフロー:隠し; /*オーバーフローコンテンツを非表示*/
垂直アライイン:中央; /*オペラのより大きな逸脱の場合、ライン内の垂直センタリング*/
幅:? PX; /*?任意のautoの価値*/
身長:? PX; /*?任意のautoの価値*/