CSS浏览器兼容性的各种代码解决方案.docxVIP

CSS 浏览器兼容性的各种代码解决方案 网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9 等主流浏览器对 CSS 解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢？广泛被使用的方法就是 CSS Hack，即使用特别的 CSS 定义显示网页在不同浏览器的设计风格，针对不同的浏览器去写不同的 CSS，最大化兼容浏览器。 一般情况下，我都会兼顾 IE 6.0 / IE 7.0 / firefox 2.0 浏览器，下面是用的较频繁的 CSS Hack 技巧： 用的最广莫过于!important 了， 它可以针对 IE（IE 7.0 能正确理解!important）和非 IE 浏览器设置不同的样式，只要在非 IE 浏览器样式的后面加上!important，就可以针对其优先了。所 以为了兼顾 IE 6.0 与火狐之间的差异，我都会使用!important。 1、仅 IE7 与 IE5.0 可以识别 *+html select {…} 当面临需要只针对 IE7 与 IE5.0 做样式的时候就可以采用这个HACK。2、仅 IE7 可以识别 *+html select {…!important;} 当面临需要只针对 IE7 做样式的时候就可以采用这个 HACK。3、IE6 及 IE6 以下识别 * html select {…} 这个地方要特别注意很多博客都写成了是 IE6 的 HACK 其实 IE5.x 同样可以识别这个 HACK。其它浏览器不识别。 4、html/**/ body select {…} 这句与上一句的作用相同。5、仅 IE6 不识别，屏蔽 IE6 select { display /*屏蔽 IE6*/:none;} 这里主要是通过 CSS 注释分开一个属性与值，注释在冒号前。6、仅 IE6 与 IE5 不识别，屏蔽 IE6 与 IE5 select/**/ { display /*IE6,IE5 不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS 注释。不屏蔽 IE5.5 7、仅 IE5 不识别，屏蔽 IE5 select/*IE5 不识别*/ {…} 这一句是在上一句中去掉了属性区的注释。只有IE5 不识别，IE5.5 可以识别。 8、盒模型解决方法 selct {width:IE5.x 宽度; voice-family :”\”}\”; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important 来处理的。这点要明确。 9、只有 Opera 识别 @media all and (min-width: 0px){ select {……} } 针对 Opera 浏览器做单独的设定。 以上都是写 CSS 中的一些 HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS 中通过过滤器导入特别的样式，也有的是写在HTML 中的通过条件来链接或是导入需要的补丁样式。 10、IE5.x 的过滤器，只有 IE5.x 可见 @media tty { i{content:”\”;/*” “*/}} @import ‘ie5win.css’; /*”;} }/* */ 11、IE5/MAC 的过滤器，一般用不着 /*\*//*/ @import “ie5mac.css”; /**/ 12、IE 的 if 条件 Hack 提供 !--[if IE] Only IE ![endif]-- 所有的 IE 可识别 !--[if IE 5.0] Only IE 5.0 ![endif]-- 只有 IE5.0 可以识别 !--[if gt IE 5.0] Only IE 5.0+ ![endif]-- IE5.0 包换 IE5.5 都可以识别 !--[if lt IE 6] Only IE 6- ![endif]-- 仅 IE6 可识别 !--[if gte IE 6] Only IE 6/+ ![endif]-- IE6 以及 IE6 以下的 IE5.x 都可识别 !--[if lte IE 7] Only IE 7/- ![endif]-- 仅 IE7 可识别 你在写 css 时样式表加上浏览器标识符就行了,各浏览器区别如下: IE 都能识别*，标准浏览器（如 FF）不能识别*； IE6 能识别*，但不能识别 !important； IE7 能识别*，也能识别 !important； FF 不能识别*，但能识别 !important；