CSS hack for IE6/IE7/IE8/Firefox/Chrome/Safari
网路上有很是多关于css hack的教学文章，固然处理方法也有不少种，接下来要跟你们说明的是属于比较简单的方法，可是如下的校订确没法经过w3c检测，虽然没法经过检测，可是针对 各个浏览器校订确是有效的！
目前浏览器大宗仍是属于ie6的天下，这缘由主要是由于xp自己内建ie6，并且不少使用者很喜欢重灌xp，所以ie6仍占走了大半的浏览器天下，不过随着windows7的出现， 却是有很是大的机会解决过气的ie6，由于windows7自己是内建ie8，微软的ie8对css的解释已经愈来愈标准，固然标准程度还是不及firefox。
另外，若是要处理ie各版本浏览器的相容性问题，那必定要有各版本的ie浏览器能够浏览，可是微软做业系统内并无让多版本的ie共存，为了让本身电脑内存在多种 版本的ie浏览器，那就赶快下载ietester来使用吧！ 另外，也别忘记下载firefox来修正网页css. css
区别ie和firefox
【辨识符号】：「\9」
【范例练习】：
#tip {
background:blue; /*firefox 背景变蓝色*/
background:red \9; /*ie六、ie七、ie8背景变红色*/
}
【说明】：由于ie浏览器看得懂「\9」，可是非ie的浏览器一概看不懂，所以就能够用这个语法来区分ie和firefox(非ie浏览器，像是opera、google chrome 、safari等)，所以以上css范例中，非ie浏览器是显示蓝色背景，ie系列浏览器是显示红色背景。
——————————–我是分隔线——————————–
区别ie六、ie七、ie八、firefox
【辨识符号】：「\9」、「*」、「_」
【范例练习】：
#tip {
background:blue; /*firefox 背景变蓝色*/
background:red \9; /*ie8 背景变红色*/
*background:black; /*ie7 背景变黑色*/
_background:orange; /*ie6 背景变橘色*/
}
【说明】：由于ie系列浏览器可读「\9」，而ie6和ie7可读「*」(米字号)，另外ie6可辨识「_」(底线)，所以能够依照顺序写下来，就会 让浏览器正确的读取到本身看得懂得css语法，因此就能够有效区分ie各版本和非ie浏览器(像是firefox、opera、google chrome、safari等)。
——————————–我是分隔线——————————–
区别ie六、ie七、firefox (方法 1)
【辨识符号】：「*」、「_」
【范例练习】：
#tip {
background:blue; /*firefox背景变蓝色*/
*background:black; /*ie7 背景变黑色*/
_background:orange; /*ie6 背景变橘色*/
}
【说明】：ie7和ie6可读「*」(米字号)，ie6又能够读「_」(底线)，可是ie7却没法读取「_」，至于firefox(非ie浏览器)则彻底没法辨识 「*」和「_」，所以就能够透过这样的差别性来区分ie六、ie七、firefox，
——————————–我是分隔线——————————–
区别ie六、ie七、firefox (方法 2)
【辨识符号】：「*」、「!important」
【范例练习】：
#tip {
background:blue; /*firefox 背景变蓝色*/
*background:green !important; /*ie7 背景变绿色*/
*background:orange; /*ie6 背景变橘色*/
}
【说明】：ie7能够辨识「*」和「!important」，可是ie6只能够辨识「*」，却没法辨识「!important」，至于firefox能够读取「!important」但不能辨识「*」所以能够 透过这样的差别来有效区隔ie六、ie七、firefox。
区别ie七、firefox
【辨识符号】：「*」、「!important」
【范例练习】：
#tip {
background:blue; /*firefox 背景变蓝色*/
*background:green !important; /*ie7 背景变绿色*/
}
【说明】：由于firefox能够辨识「!important」但却没法辨识「*」，而ie7则能够同时看懂「*」、「!important」，所以能够两个辨识符号来区隔ie7和firefox。
——————————–我是分隔线——————————–
区别ie六、ie7 (方法 1)
【辨识符号】：「*」、「_」
【范例练习】：
#tip {
*background:black; /*ie7 背景变黑色*/
_background:orange; /*ie6 背景变橘色*/
}
【说明】：ie7和ie6均可以辨识「*」(米字号)，但ie6能够辨识「_」(底线)，ie7却没法辨识，透过ie7没法读取「_」的特性就能轻松区隔ie6 和ie7之间的差别。
区别ie六、ie7 (方法 2)
【辨识符号】：「!important」
【范例练习】：
#tip {
background:black !important; /*ie7 背景变黑色*/
background:orange; /*ie6 背景变橘色*/
}
【说明】：由于ie7可读取「!important;」但ie6却不行，而css的读取步骤是从上到下，所以ie6读取时因没法辨识「!important」而直接跳到下一行读 取css，因此背景色会呈现橘色。
——————————–我是分隔线——————————–
区别ie六、firefox
【辨识符号】：「_」
【范例练习】：
#tip {
background:black; /*firefox 背景变黑色*/
_background:orange; /*ie6 背景变橘色*/
}
【说明】：由于ie6能够辨识「_」(底线)，可是firefox却不行，所以能够透过这样的差别来区隔firefox和ie6，有效达成css hack。
——————————–我是分隔线——————————–
关于ie六、ie七、ie八、firefox之间的css hack大概是以上那样，若是有疏漏或是有错误还烦请你们指证一下啰！ 这些css hack是我目前看过比较简单的处理方式，固然若是你不会很在乎css是否经过w3c的验证，你只会在乎每一个用户在不一样的浏览器下阅读是否能够正常的话，其实以上css hack 对你来讲是很是好用的，由于这些css hack若是善加利用确实能够正确的解决浏览器相容性问题。
以上的css hack参照了如下几篇文章所整理出来的，感谢如下文章的详细说明。 html
浏览器兼容问题一直是前段开发工程师比较头痛的问题，熟悉了里面的规则也就变得简单了，这里有一份资料能够分享给你们，你们平时开发过程当中遵循这个规律的话，会变得轻松多了： chrome
各浏览器CSS hack兼容表： windows
| IE6 | IE7 | IE8 | Firefox | Chrome | Safari | |
| !important | Y | Y | ||||
| _ | Y | |||||
| * | Y | Y | ||||
| *+ | Y | |||||
| \9 | Y | Y | Y | |||
| \0 | Y | |||||
| nth-of-type(1) | Y | Y |
代码示例： 浏览器
#test{
color:red; /* 全部浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE六、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE六、IE七、IE8支持 */
color:red\0; /* IE8支持 */
} 测试
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */ 网站
总体测试代码示例： ui
.test{
color:#000000;
color:#0000FF\0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
} google
其余说明： spa
一、若是你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅须要在目前兼容IE7的网站上添加一行代码便可解决问题，此代码以下：
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
二、body:nth-of-type(1) 若是这样写，表示全局查找body，将会对应第一个<body>。
三、还有其余写法，好比：
*html #test{}或者 *+html #test{}
四、*+html 对IE7的hack 必须保证HTML顶部有以下声明：
http://www.w3.org/TR/html4/loose.dtd
五、顺序：Firefox、IE八、IE七、IE6依次排列。
小知识：什么是CSS hack？
因为不一样的浏览器，好比IE六、IE七、IE八、Firefox等，对CSS的解析认识不同，所以会致使生成的页面效果不同，得不到咱们所须要的页面效果。
这个时候咱们就须要针对不一样的浏览器去写不一样的CSS，让它可以同时兼容不一样的浏览器，能在不一样的浏览器中也能获得咱们想要的页面效果。
这个针对不一样的浏览器写不一样的CSS code的过程，就叫CSS hack，也叫写CSS hack。
- 1. css hack for IE
- 2. css hack hack
- 3. CSS之CSS hack
- 4. CSS Hack
- 5. css hack
- 6. CSS hack
- 7. CSS HACK
- 8. IE6 hack for js
- 9. css样式 --- CSS hack
- 10. css HACK
- 更多相关文章...
- • W3C CSS 活动 - W3C 教程
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 适用于PHP初学者的学习线路和建议
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. css hack for IE
- 2. css hack hack
- 3. CSS之CSS hack
- 4. CSS Hack
- 5. css hack
- 6. CSS hack
- 7. CSS HACK
- 8. IE6 hack for js
- 9. css样式 --- CSS hack
- 10. css HACK