1. !important
随着IE7对!important的支持,现在IE7和FF都支持!important,可以用!important来区分FF、IE7和IE6的高度。
用法如下:
Html代码
- <style rel="stylesheet" type="text/css">
- <!--
- .content{background:#a5a5a5;height:100px !important;}/* Moz+IE7 */
- .content{background:#a5a5a5;height:200px;}/* IE6 */
- -->
- </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代码
- <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>
<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代码
- height:50px; /*For Firefox*/
- *height:100px; /*For IE7 & IE6*/
- _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代码
- <style rel="stylesheet" type="text/css">
- <!--
- .content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;}
- -->
- </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
IE6 | IE7 | FF | |
* | √ | √ | × |
!important | × | √ | √ |
另外再补充一个,下划线" _",
IE6支持下划线,IE7和firefox均不支持下划线。
于是大家还可以这样来区分 IE6, IE7, firefox
: background: orange; *background: green; _background: blue;
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。