通常、ほとんどの DIV ベースのレイアウトでは、ページ (外側のスケルトン) を次のようにコーディングします。
<body>
<div class="wrapper">
<div class="minwidth">
<div class="layout">
<div class="container">
<div class="content">
//Some content....
</div>
</div>
</div>
</div>
</div>
</body>
以下は私が使用する CSS です。
html,body{padding:0;margin:0;background:url(../images/bodybg.gif) #ececed left top repeat-x;color:#3b3b3b;font:normal 85% verdana}
.wrapper{width:99.8%;min-width:959px;margin:0 auto}
* html .minwidth{padding-left:959px}
* html .minwidth,* html .layout,* html .container,* html .content{height:1px}
* html .container{margin-left:-959px;position:relative}
.content{padding:0;margin:0 16px}
ここで、私は UI 開発に関心があり (レイアウト設計にはあまり関心がないため)、これらの div の一部が実際に使用されている「理由」を正確に理解していないことを認めなければなりません。私の推測では、これらの div の一部は、古い IE の最小幅サポートの欠如に対する一種のハックとして使用されています。
私の質問は次のとおりです。
- 上記のレイアウト コードが標準であり、ブラウザ間の互換性のために必要かどうかを教えてください (特定の最小幅の要件も想定しています)。
- 古い IE では min-width をサポートするためだけに非常に多くの div が必要だったと思いますか? 最新の IE (IE8/9 など) は min-width を完全にサポートしていますか?
- 流動的なレイアウト、つまり複数のプラットフォーム (iPad などのデスクトップ/タブレット、およびある程度のモバイル デバイス) でシームレスに動作するレイアウトを設計したいと考えています。
- 画面の解像度（デスクトップ/タブレットなど）に応じて適切に調整される流動的なレイアウトを確保するために、他の骨格構造を提案してください。