特牛的FF/IE6/IE7专用CSS HACK


答案：这是一篇关于CSS HACK的文章，这篇文章中提到的CSS HACK是针对class、id中属性的HACK，排列的顺序都具有要求。今天要和大家说的是针对class、id所做的CSS HACK。        

复制代码 代码如下:


.test{/*FF*/   

    height:20px;   

    background-color:orange;   

}   

*+html .test{/*IE7*/   

    height:20px;   

    background-color:blue;   

}   

*html .test{/*IE6*/   

    height:20px;   

    background-color:black;   

} 






通过上面的CSS代码可以看出FF还是最听话的浏览器，在IE6和IE7如果要使用HACK必须要在前面加上夫级标签html。这里就很好记忆了，IE6加*html，而IE7加*+html，暗示加了一个版本。通过对class、id所做的CSS HACK好处在于不用顾及前后顺序，而且便于管理和其他人员接受，还可以通过这种HACK实现类似JS浏览器版本的控制。缺点嘛可能就是产生大量的代码吧！好了，大致就先说说这些。 


上面内容看完可以点击下面的效果在不同浏览器来看看效果，其中橙色代表FF，蓝色代表IE7，黑色代表IE6。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>脚本之家 www.zzzyk.com CSS hack</title> 

<style type="text/css"> 

*{ 

    margin:0; 

    padding:0; 

} 

.test{/*FF*/ 

    height:20px; 

    background-color:orange; 

} 

*+html .test{/*IE7*/ 

    height:20px; 

    background-color:blue; 

} 

*html .test{/*IE6*/ 

    height:20px; 

    background-color:black; 

} 

</style> 

</head> 

    <div class="test"></div> 

<body> 

</body> 

</html> 




  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：大家看了就明白了css样式中类class与标识id选择符的区别小结
下一个：css强制换行 css强制不换行的css方法
更多图片编程知识: