FF、IE7、IE6的CSS问题

本文介绍如何使用CSS hack技巧来区分不同浏览器,包括如何针对IE6、IE7、Firefox设置不同的样式,并讨论了IE与Firefox之间的特殊标签如*html与*+html的用法。
出处:http://www.iteye.com/topic/172342
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>  
 
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>  
 
Html代码  
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>  
 我是这样理解这段代码的:
因为在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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值