FF、IE7、IE6的CSS问题

1. !important
随着IE7对!important的支持,现在IE7和FF都支持!important，可以用!important来区分FF、IE7和IE6的高度。

用法如下：

Html代码

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

<style rel="stylesheet" type="text/css">

<!--

.content{background:#a5a5a5;height:100px !important;}/* Moz+IE7 */

.content{background:#a5a5a5;height:200px;}/* IE6 */

-->

</style>

 

2.IE6/IE7对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签,IE6暂不支持。

用法如下：

Html代码

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

<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>

 

Html代码

1. height:50px; /*For Firefox*/  
2. *height:100px; /*For IE7 & IE6*/  
3. _height:150px; /*For IE6*/  

height:50px; /*For Firefox*/

*height:100px; /*For IE7 & IE6*/

_height:150px; /*For IE6*/

同样可以用相同的原理来为IE6、IE7、FF设置不同的width,height,margin,padding等属性。

 

3.min-height

IE不认min-height,FF识别,利用以上这些属性，我们可以这样定义最小高度

 

Html代码

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

<style rel="stylesheet" type="text/css">

<!--

.content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;}

-->

</style>

 我是这样理解这段代码的：

因为在IE里（包括IE6,IE7）认为height就是最小高度，当content中的内容超出设置的高度时，在FF中可以用min- height设置最小高度××，这时即使超出content的高度，背景颜色也会自动延伸下去。但IE不识别min-height，所以要加hack（对 程序所作的修改，在尚未被开发者接受并集成到正式版本中之前被称为hack）。

 

4.区别不同浏览器，Css hack写法：

区别IE6与FF：
background:orange;       *background:blue;

区别IE6与IE7：
background:green !important;     background:blue;

区别IE7与FF：
background:orange;      *background:green;

区别FF，IE7，IE6：
background:orange;    *background:green !important;    *background:blue;

 -------------------------------------------------------------------------------------------

CSS hack:区分IE6，IE7，firefox

区别不同浏览器，CSS hack写法：

区别 IE6与 FF：

       background: orange; *background: blue;

区别 IE6与 IE7：

       background: green  !important;background: blue;

区别 IE7与 FF：

       background: orange;  *background: green;

区别 FF， IE7， IE6：

       background: orange; *background: green  !important;*background: blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

---

另外再补充一个，下划线" _",
IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分 IE6， IE7， firefox
: background: orange; *background: green; _background: blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。