▼EntryMore▼
解説
※サンプルで書かれているCSSの、重要な部分だけ抜き出しています。
上記の2行目に書かれているものは、そのまま「min-height」ですね。
問題は、その下の2行です。
「height: auto !imporant;」と書くと、当然その要素が必ず適用されます。つまり、この場合で言えば「height」の値は「auto」ということになります。
もちろん「!imporant」はIE6でも使えます。
しかしIE6の場合、同じ宣言内の場合（今回のサンプルのような場合）、なぜか「!imporant」が無視され、その下で宣言されたものが適用されるのです。
そのため、IE6だけは「height: 150px;」と認識していることになります。
さらに、IE6はボックスモデルが中途半端なこともあり、ボックス要素に明示的に高さや幅をしていても内容量に合わせてボックス要素の大きさが変わる、というバグがあります。
このバグも手伝って、まるでIE6でも「min-height」が適用されているように見える、というわけです。
コメント
1 - 通りすがり さん
まだまだ修行中のデザイナーです。
cssを、ここまで分かりやすく解説して下さる所あまり無いと思います。
サンプルも何個か頂きました。
ありがとう御座います！
ちょくちょくのぞかせて頂きます。
2008年4月25日 02:52
2 - えど
さん
>>1 - 通りすがりさん
コメントありがとうございます！
CSSを始めたばかりの人でもわかりやすく、をコンセプトにサイトを作っているので、今回のコメントはとてもうれしかったです！
2008年4月25日 16:03