最近自分用に新しいウェブサイトを構築しており、いくつかのエフェクトを思いついたのですが、実装中にこのインラインブロックのようないくつかの小さなトラブルに遭遇しました。幸いなことに、問題のほとんどは解決されたので、共有するために書きました。
Web ページを作成しているとき、要素がブロックのように幅と高さを定義でき、また通常のインラインのように継続的に実行できるようにしたい場合があります。たとえば、下の図の赤線で示した場所です。
通常、このような効果を実現するには次のようなコードを使用します。
ソースコードの例
[www.downcodes.com]これで目標は達成できますが、コードはまだ十分に洗練されておらず、柔軟性も十分ではありません。理想的な方法では、次のコードだけでこれを実現できます。
ソースコードの例
[www.downcodes.com]この場合、aタグにwidth heightとbackground-imageを指定する必要があります。ただし、a タグのデフォルトの表示属性はインラインであり、width、height は無効です。また、display:block が a に設定されている場合、幅と高さの問題は解決できますが、要素は自動的に改行され、必要な効果を得ることができません。自動的に改行せずに高さと幅を設定できる img タグと同じことを実現する方法はありますか?
答えは「はい」です。 Opera と Webkit は、CSS2 プロパティ表示: inline-block をサポートしています。この属性を使用すると、Opera で必要な効果を完全に実現できますが、他のブラウザでは機能しません。
また、display 属性には、あまり一般的ではない値の display: inline-table もあります。この値を使用すると、必要な効果を完全に達成することもできます。このプロパティは IE を除くすべてのブラウザで正しくサポートされていますが、また IE です。すべての Web 開発者は CSS に直面すると嫌がるでしょうが、IE を放棄することはユーザーの 70% を放棄することに等しいため、依然として他の解決策を見つける必要があります。
仕方なくグーグルで検索してみたら、本当に見つかりました。この記事で指摘したように、最初に IE の hasLayout をトリガーし、次にその display: inline を設定すると、この要素は inline-block になります。このように、IE のこの理不尽な機能を利用して、CSS と組み合わせることができます。ハック: さまざまなブラウザと互換性のある CSS コードを提供します。
ソースコードの例
[www.downcodes.com] .要素クラス {
表示: -moz-inline-stack; //Firefox のみのコード
display: inline-block; //一部の標準ブラウザ
ズーム: 1; //IE のみ
*display: inline; //このコードは IE だけが知っています (CSS ハック)
}
このコードにより、さまざまなブラウザーで一貫して動作するインライン ブロックを実現できます。ただし、この方法には小さな欠点があります。それは、W3C CSS 検証に合格できないということです。もちろん、IE 以外のブラウザに対して inline-table 属性を指定したスタイルシートを発行したり、IE 用に別途 IE Only CSS を発行したりすることも非常に簡単です。
