CSSハックの使い方を教えてください

質問

CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・

そこで、この際CSSハックを使おうと思っています。
といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・
など個別のブラウザに異なったCSSを指定することができるのでしょうか？
実際の記述方法を教えていただけないでしょうか？
「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・

ちなみに、この現象のほかの解決方法ってあるのでしょうか？

#wrapper{
position:relative;
width:870px;
margin:0px auto;
text-align:left;
}

#foot{
position:relative;
width:100%;
height:auto;
clear:both;
}

回答No.1

abril

> CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません

「間を詰める（なくす）」のではなく「空ける」方であれば大抵問題ない筈なのですけどね。

> この際CSSハックを使おうと思っています。

CSS hackは最後に「やむを得ず」使う手段です。「（CSS hackがどういうのものか）よくわかってない」状態で使用することはリスクを伴うと思いますが、大丈夫ですか？

> CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・など個別のブラウザに異なったCSSを指定することができるのでしょうか？

hackの記述法によっては個別に分けられるものもあり、一緒くたになってしまう組み合わせもあります。

> 実際の記述方法を教えていただけないでしょうか？
> 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・

上記に回答することは簡単なのですが、質問者様はそろそろ「知りたいことがあったらまず調べて理解を試みる」という習慣を付けられた方が良いでしょう。本件の場合はキーワードも明快な事この上ないのですし。「CSS　ハック」でググって下さい。無数の解説とサンプルが出てきますから。

ただし、CSS hackはブラウザのヴァージョン・アップにより無効になったり有害になったり（本来バグであったものが解消されて有効になる、もしくはバグ故無視される筈の記述が有効になっていたものがバグが解消されて無視される様になる）する可能性を含む、諸刃の剣であることも理解しておくべきでしょうね。今後、その様な事態が起きた時に更なる対応が必要に迫られる事があるかもしれない、という覚悟が必要だということです。

> ちなみに、この現象のほかの解決方法ってあるのでしょうか？

これだけではわかりません。情報が不足していますので、もっと詳細なソースを提供して下さい。

お礼

ありがとうございます。
CSSハックについては再度調べなおしてみます。

別の解決方法ですが・・・

<div id="wrapper" class="clearfix">

<!-- ********* ヘッダー ******** -->
<div id="head">
</div>
<!-- ********* 左側 ******** -->

<div id="left">

</div>

<!-- ********* 右側 ******** -->
<!-- TemplateBeginEditable name="right" -->
<div id="right"> </div>
<!-- TemplateEndEditable -->
<!-- ********* フッター ******** -->
</dIV>
<div id="foot">

/* ラッパーの設定*/
#wrapper{
position:relative;
width:870px;
margin:0px auto;
text-align:left;
}

/* ヘッダーの設定*/
#head{
width:870px;
height:88px;
float: left;
background-image: url(img/head-bg.gif);
margin: 0px;
}
/* 左側の設定*/
#left{
width:200px;
height:auto;
float:left;
margin: 0 0px 35px 0;
}
/* 右側（メインコンテンツ）の設定*/

#right {
width: 650px;
float: right;
}
/* フッターの設定*/

#foot{
position:relative;
width:100%;
height:auto;
clear:both;
}

簡単に詳細を記述すると以上のような感じです。
http://okwave.jp/qa3517253.html?ans_count_asc=20

こちらを参考にいろいろ試してみたのですが、うまくいきませんでした・・・

どうかよろしくお願いいたします。