FF、IE 7、IE 6のCSS問題

1. !important随IE 7対!importantのサポートは、現在IE 7とFFがサポートしています!important、使えます!importantは、FF、IE 7、およびIE 6の高さを区別する.
使用法は次のとおりです.

<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:100px !important;}/* Moz+IE7 */
.content{background:#a5a5a5;height:200px;}/* IE6 */
-->
</style>

 
2.IE 6/IE 7対FireFox
*+htmlと*htmlはIE特有のラベルで、firefoxはしばらくサポートしていません.*+htmlはIE 7特有のラベルで、IE 6はしばらくサポートされていません.
使用法は次のとおりです.

<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:100px;}/* Moz */
*html .content{background:#a5a5a5;height:200px;}/* IE6 */
*+html .content{background:#a5a5a5;height:300px;}/* IE7 */ 
-->
</style>

 

height:50px; /*For Firefox*/
*height:100px; /*For IE7 & IE6*/
_height:150px; /*For IE6*/

同様に,IE 6,IE 7,FFに対して異なるwidth,height,margin,paddingなどの属性を同じ原理で設定することができる.
 
3.min-height
IEはmin-height,FF認識を認めず,これらの属性を利用して,最小高さをこのように定義できる
 

<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;}
-->
</style>

私はこのコードをこのように理解しています.
IE(IE 6,IE 7を含む)ではheightが最小高さであると考えられているため、contentの内容が設定の高さを超えた場合、FFではmin-heightで最小高さを設定することができる××,このときcontentの高さを超えても背景色は自動的に伸びていきます.ただしIEはmin-heightを認識しないのでhack(プログラムの修正は、開発者に受け入れられず正式バージョンに統合される前にhackと呼ばれる)を加える.
 
4.異なるブラウザを区別し、Css hackの書き方:
IE 6とFFの区別:background:orange;       *background:blue; IE 6とIE 7:background:greenを区別!important;     background:blue; IE 7とFFの区別:background:orange;      *background:green; FF,IE 7,IE 6:background:orange;    *background:green !important;    *background:blue;