😪 👩🏾‍🎨 🍎 テーブルなしの正当化またはインラインブロックの再検討 😗 🔪 🐝

誰もがインラインブロックのクロスブラウザ実装について長い間知っていましたが、この実装がクロスブラウザではなく、見かけほど完全ではないことを誰もが知っているわけではありません。何を、どのように、そしてなぜ、簡単な例を見てみましょう：アイテムが画面幅全体に均等に分配されるメニューを作成します。

通常、メニューのレイアウトでは次のようになります。

<ul class="menu"> <li class="menu-item"> <a href="/news"></a> </li> <li class="menu-item"> <a href="/swen"></a> </li> <li class="menu-item"> <a href="/profit"> </a> </li> </ul>

そして、これのCSSは次のようなものです：

 .menu-item { display: inline-block; } * html .menu-item { display: inline; zoom: 1; } *+html .menu-item { display: inline; zoom: 1; }

その結果、各メニュー項目は行内の単語であることがわかります（インラインブロックは独自の書式設定コンテキストを持つ不可分な単位であるため、項目内にある単語の数に関係なく）、そして単語が行の幅全体に引き伸ばされるように、次のようにします：

 .menu { text-align: justify; } .menu-item { display: inline-block; text-align: left; } * html .menu-item { display: inline; zoom: 1; } *+html .menu-item { display: inline; zoom: 1; }

しかし、これは望ましい結果を与えません。 cssにはtext-alignプロパティの完全な調整値はなく、通常のjustifyは最後の行を除いて行内の単語間の距離を伸ばすので、新しい行に転送される何らかの種類の十分に長い単語を入力する必要があります（css3にはtext-最後の行の配置を操作するためにalign-lastを使用しますが、これは明るい未来でのみ機能します）。もちろん、単語を書くことはあまり良い選択肢ではありません。別のメニュー項目を作成し、親の幅の100％に引き伸ばすだけです（100未満にすることもできます。そうすれば、かなり興味深い効果が得られます）。

 <ul class="menu"> <li class="menu-item"> <a href="/news"></a> </li> <li class="menu-item"> <a href="/swen"></a> </li> <li class="menu-item"> <a href="/profit"> </a> </li> <li class="menu-item menu-item_sizer"> &nbsp; </li> </ul>

 .menu { text-align: justify; } .menu-item { display: inline-block; text-align: left; } * html .menu-item { display: inline; zoom: 1; } *+html .menu-item { display: inline; zoom: 1; } .menu-item_sizer { width: 100%; }

このコードは、Internet Explorer 6および7（それを疑う人）を除くすべてのブラウザーで同等に機能します。しかし、問題は、これらのバージョンのエクスプローラーのこのような「インラインブロック」が「ブロックが大きすぎる」という事実にあります-それらは周囲の空白を考慮していません。実例：

 <span class="inlineBlock">Test</span> word

通常のブラウザでは、次のようになります。

 Test word

このようなエクスプローラーの古いバージョンでは：

 Testword

幸いなことに、この問題に対する解決策があり、それは表面上にあります。この「インラインブロック」をよりインラインにする必要があります。そのためには、インライン要素でラップする必要があります。判明したこと：

 <ul class="menu"> <li class="menu-item_wrap"> <div class="menu-item"> <a href="/news"></a> </div> </li> <li class="menu-item_wrap"> <div class="menu-item"> <a href="/swen"></a> </div> </li> <li class="menu-item_wrap"> <div class="menu-item"> <a href="/profit"> </a> </div> </li> <li class="menu-item_wrap menu-item_sizer"> &nbsp; </li> </ul>

 .menu { text-align: justify; } .menu-item_wrap { display: inline; } .menu-item { display: inline-block; text-align: left; } * html .menu-item { display: inline; zoom: 1; } *+html .menu-item { display: inline; zoom: 1; } .menu-item_sizer { width: 100%; }

しかし、これは望みどおりの結果にはなりませんが、すべてが正常に機能しているように見えます。問題は、エクスプローラーが各アイテムを単一の全体と見なさないため、すべてが分割されることです。タグの終了シーケンスの空白文字に関するものです。単純に修正されます：

 <ul class="menu"> <li class="menu-item_wrap"> <div class="menu-item"> <a href="/news"></a></div></li> <li class="menu-item_wrap"> <div class="menu-item"> <a href="/swen"></a></div></li> <li class="menu-item_wrap"> <div class="menu-item"> <a href="/profit"> </a></div></li> <li class="menu-item_wrap menu-item_sizer">&nbsp;</li> </ul>

テンプレートエンジンを使用する場合は、ジョブを実行させます（たとえば、djangoテンプレートまたはjinjaのスペースのないタグ）。

すべてのブラウザで必要に応じてすべてが見栄えが良くなります...各アイテム内で何か面白いことをしたい場合は、各アイテムの右端にアイコンを押します。

 <ul class="menu"> <li class="menu-item_wrap"> <div class="menu-item"> <span class="menu-item-icon"> </span> <a href="/news"></a></div></li> <li class="menu-item_wrap"> <div class="menu-item"> <span class="menu-item-icon"> </span> <a href="/swen"></a></div></li> <li class="menu-item_wrap"> <div class="menu-item"> <span class="menu-item-icon"> </span> <a href="/profit"> </a></div></li> <li class="menu-item_wrap menu-item_sizer">&nbsp;</li> </ul>

 .menu { text-align: justify; } .menu-item_wrap { display: inline; } .menu-item { background-color: Green; display: inline-block; padding: 5px 15px; position: relative; text-align: left; } * html .menu-item { display: inline; zoom: 1; } *+html .menu-item { display: inline; zoom: 1; } .menu-item_sizer { width: 100%; } .menu-item-icon { background-color: Red; height: 5px; position: absolute; right: 0; }

古いエクスプローラーを含むすべてのブラウザーでは、Operaのすべてのバージョン（疑わしい）を除き、すべてが問題ありません。 Operaでは、アイコンがアイテムの右端ではなく左に押されていることがわかります。これは、開発者がさらに10年間生きることを妨げる、ありふれたバグです。インラインブロック要素にブロック要素またはテキストが含まれていない場合、配置の境界に違反するという事実にあります。これは、別の内部ブロックラッパーを追加することで修正されます。

 <ul class="menu"> <li class="menu-item_outerWrap"> <div class="menu-item"> <div class="menu-item_innerWrap"> <span class="menu-item-icon">&nbsp;</span> <a href="/news"></a></div></div></li> <li class="menu-item_outerWrap"> <div class="menu-item"> <div class="menu-item_innerWrap"> <span class="menu-item-icon">&nbsp;</span> <a href="/swen"></a></div></div></li> <li class="menu-item_outerWrap"> <div class="menu-item"> <div class="menu-item_innerWrap"> <span class="menu-item-icon">&nbsp;</span> <a href="/profit"> </a></div></div></li> <li class="menu-item_outerWrap menu-item_sizer">&nbsp;</li> </ul>

 .menu { text-align: justify; } .menu-item_outerWrap { display: inline; } .menu-item { background-color: Green; display: inline-block; padding: 5px 15px; position: relative; text-align: left; } * html .menu-item { display: inline; zoom: 1; } *+html .menu-item { display: inline; zoom: 1; } .menu-item_innerWrap { display: block; } .menu-item_sizer { width: 100%; } .menu-item-icon { background-color: Red; height: 5px; position: absolute; right: 0; }

主なことは、IE6の.menu-item hasLayout内にブロック要素を含めないことです。なぜなら、これにより、インラインブロックが幅全体に「破裂」します。これを解決するには、ブロック要素に固定幅を設定します（コンテンツに幅が必要な場合は、IE6のみに幅をゼロに設定する必要があります）。

一方で、それは困難で非常に美しいものではないことが判明しましたが、他方では、必要に応じて動作し、他の場所で（ほとんど）恐れることなく使用できるソリューションを取得しました。たとえば、コンテンツで動作する独自のコントロールを作成するために標準のブラウザコントロールのように（このようなコントロールの動作を変更するには、要素のブロックやフローティングを作成する場合など、すべてのインラインブロック部分にすべてを適用する必要があります）。

さて、修正効果のために、zen-cssのような擬似コードの実際のインラインブロックの「式」：

 inline>inline-block>block

ここでCSSを強調表示する必要があることを誰かが管理者に通知するでしょうか？そして、私の要求はどういうわけか無視されました。

テーブルなしの正当化またはインラインブロックの再検討

More articles: