浏览器兼容 IE6、IE7、IE8、Firefox、Opera CSS hack区分

简介:

小知识:什么是CSS hack?

  由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

  这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

  这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

针对样式名

如果只让ie6看见用*html .head{color:#000;} 如果只让ie7看见用*+html .head{color:#000;} 如果只让ff看见用:root body .head{color:#000;} 如果只让ff、IE8看见用html>/**/body .head{color:#000;} 如果只是不让ie6看见用html>body .head{color:#000;} 即对IE 6无效 如果只是不让ff、IE8看见用*body .head{color:#000;}    即对ff、IE8无效

针对具体属性

如果只让ie6看见用_     .head{_color:#000;} 如果只让ie7看见用+与_结合的方法:     .head{+color:#f00;!;_color:#000;}

IE8正式版hack

\9″ 例:”margin:0px auto\9;”.这里的”\9″可以区别所有IE8和FireFox. “*” IE6、IE7可以识别.IE8、FireFox不能. “_” IE6可以识别”_”,IE7、IE8、FireFox不能. 如: .a {color:#f00;     color:#f60\9;    +color:#00FF00;    _color:#0000FF; } 从左到右分别对应 FF,IE8 IE7 IE6

-------------------------------------------------

各浏览器CSS hack兼容表:

  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; /* IE6、IE7支持 */ *+color:red; /* IE7支持 */ color:red\9; /* IE6、IE7、IE8支持 */ color:red\0; /* IE8支持 */ }

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

整体测试代码示例:

.test{ color:#000000; color:#0000FF\0; [color:#00FF00; *color:#FFFF00; _color:#FF0000; }

其他说明:

1、如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下: <meta http-equiv="x-ua-compatible" content="ie=7" />

2、body:nth-of-type(1) 如果这样写,表示全局查找body,将会对应第一个<body>。

3、还有其他写法,比如: *html #test{}或者 *+html #test{}

4、*+html 对IE7的hack 必须保证HTML顶部有如下声明: http://www.w3.org/TR/html4/loose.dtd

5、顺序:Firefox、IE8、IE7、IE6依次排列。


本文转自寒意博客园博客,原文链接:http://www.cnblogs.com/hnyei/archive/2012/03/13/2393384.html,如需转载请自行联系原作者

相关文章
|
15天前
|
Web App开发 前端开发
CSS Hack是什么?ie6,7,8的hack分别是什么
CSS Hack是什么?ie6,7,8的hack分别是什么
72 0
|
6月前
|
前端开发 JavaScript UED
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
28 0
|
7月前
|
前端开发 开发者
介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
|
2天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
2天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。
|
6天前
|
前端开发
尚硅谷html5+css3(3)布局
尚硅谷html5+css3(3)布局
|
6天前
|
移动开发 搜索推荐 HTML5
尚硅谷html5+css3(1)html相关知识
尚硅谷html5+css3(1)html相关知识
|
7天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
14 1
|
15天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
29 0
HTML5/CSS3粒子效果进度条代码
|
15天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
28 1