Webシステム用管理者画面作成マニュアル デザイン/HTML/CSS/JavaScript集
CSS

min-height、min-widthをブラウザに関係なく使う

こちら(min-height,max-height,min-width,max-widthをIEで使う)でも書いたようには、min-height・min-widthはIE6など一部の古いブラウザではでは使用できません。

こちらでは、「Easiest cross-browser CSS min-height」と「CSS Browser Selector」のコンボ技で、IE6・IE7・FF2・FF3・Safari3・Opera9・Mac IE5.1・Mac IE5.2に対して「min-height」を有効にする方法を記載しました。

(1)まずは「Easiest cross-browser CSS min-height」の概要。

IE6では min-height や min-width が効かないため、それを効かせるためにはいろいろなハックやブラウザごとのスタイルシートが必要だった。 しかし以下のようにすればIE6にも対応したものが実現できる。
私が確認したところ、このままではMac IE5.1、Mac IE5.2ではmin-height や min-widthが有効にならなかった。

■min-height ■min-width
.foo{
min-height:1000px;
height: auto !important;
height: 1000px;
}
bar{
min-width:500px;
width: auto !important
width: 500px;
}

(2)「Easiest cross-browser CSS min-height」と「CSS Browser Selector」のコンボ技でMac IE5.1、Mac IE5.2でもmin-height や min-widthにさせることができた。
とりあえずmin-heightだけ先日使う機会があったので、min-heightの記述方法を書きました。
これで一応ほとんどのブラウザで対応可能となりました。
(他のCSSもいっぱい記述した中に書いて検証したので、もしかしたら他のCSSとの兼ね合いで適用されている可能性があります。)

■min-height
.foo{
min-height:1000px;
height: auto !important;
height: 1000px;
}
.mac.ie5 .foo{
height: 1000px !important;
}

以下は上記CSSと一緒にbodyに対して記述したCSSです。
このセットで私はCSSを作ったので、もし上のCSSだけで適用されなかったら、こちらも書いてみてください。

*{
margin:0px;
padding:0px;
}
html{
margin:0px;
padding:0px;
}
body{
margin:0px auto 0px auto;
padding:0px 0px 0px 0px;
width:800px;
line-height:160%;
}

▲UP
エルテ化粧品
▲「エルテ化粧品」スポンサーサイトです。
広告募集中
(c)kanri-gamen