浅谈CSS HACK——兼容不同浏览器的CSS

最新推荐文章于 2023-12-27 17:35:44 发布

riancy6

最新推荐文章于 2023-12-27 17:35:44 发布

阅读量493

点赞数

本文链接：https://blog.csdn.net/riancy6/article/details/23463977

版权

CSS hack是由于不同的浏览器，比如IE6,IE7,Firefox等，对CSS的解析不一样，导致解析的页面效果不一样，这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到同样页面效果。

CSS hack原理:
IE都能识别*，FF不能识别*
IE6能识别*，但不能识别!important
IE6识别_，IE7和FF均不识别_
IE7能识别*，也能识别!important
FF不能识别*，但能识别!important

所以大家就可以用这些符号来区分不同的浏览器，以下两种方法几乎能解决现今所有css hack：

1. !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.

    width: 100px!important; /* IE7+FF */  
    width: 80px; /* IE6 */

2, IE6/IE77对FireFox

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

    #wrapper { width: 120px; } /* FireFox */  
    *html #wrapper { width: 80px;} /* ie6 fixed */  
    *+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */

注:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

3.区分FF,IE6,IE7

    background:orange;*background:green !important;*background:blue;        
    /*或者*/background:orange;*background:green;_background:blue;

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

转至：http://www.yangzblog.com/DIV-CSS/css-hack.html

riancy6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈CSS HACK——兼容不同浏览器的CSS

CSS hack是由于不同的浏览器，比如IE6,IE7,Firefox等，对CSS的解析不一样，导致解析的页面效果不一样，这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到同样页面效果。CSS hack原理:IE都能识别*，FF不能识别*IE6能识别*，但不能识别!importantIE6识别_，IE7和FF均不识别_IE7能识别*，也
复制链接

扫一扫