-->

WEB资讯

您的当前位置:首页 > 资讯 > CSS

浏览器兼容性 CSS hack

2018-08-31 16:30:02  来源:starDreamFlower 点击:1045

标识区别

DOM结构

区别IE6,IE7,IE8,FF。

  1. IE都能识别* ; 标准浏览器(如FF)不能识别*;
  2. IE6能识别*,但不能识别 !important; IE6在样式前面加_
  3. IE7能识别*,也能识别!important;
  4. IE8能识别\ 9 例如:background:red \9;
  5. firefox不能识别*,但能识别!important;

例子如下:

1.IE6和firefox的区别

 background: orange;
 *background: blue;

意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景颜色是蓝色

2.IE6和IE7的区别

 background: green !important;
 background: blue;

意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色

3.IE7和FF的区别:

 background: orange;
 *background: green;

意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色

4.FF,IE7,IE6的区别

 background: orange;
 *background: green !important;
 *background: blue;

意思是火狐浏览器的背景颜色是橙色,IE7浏览器的背景颜色是绿色,而IE6浏览器的背景颜色是蓝色

实践建议

开发平台的选择

在Firefox上编写CSS,同时兼容其他浏览器的。这样做肯定会比在IE做好再到别的浏览器兼容来得容易,因为IE对老标准支持还是很不错的,而IE的一些特有功能人家却不支持。所以推荐以Firefox结合Firebug扩展作为平台

CSS Hack 的顺序

使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略,顺序如下:Firefox -> IE6 -> IE7 -> 其他

Hack 的方法

说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.

1. 同一文件中处理.如: id="bgcolor"的控件要在 IE6中显示蓝色, IE7中显示绿色, Firefox等其他浏览器中显示红色。 11.jpg        

     详细解释如下:IE6不认 !important,也不认 *+html.所以 IE6只能是 blue. IE7认 !important,也认 *+html,优先度: (*+html + !important) > !important > +html. IE7可以是 red, blue和green,但 green的优先度最高.Firefox和其他浏览器都认 !important. !important优先, Firefox可以是 red和 blue,但 red优先度高.上述的优先符号均是 CSS3标准允许的,其他浏览器也还有其他的 Hack方法,但我迄今还没遇到过 Firefox正常, IE以外的其他浏览器不正常的情况,所以无可分享.只要代码规范,相信这种情况的发生应该是很罕见 (JavaScript除外).

2. 不同文件中处理.为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器?这是为了欺骗 W3C的验证工具,其实只需要两个文件,一个是针对所有浏览器的,一个只为 IE服务.将所有符合 W3C的代码写到一个里面去,而一些 IE中必须的,又不能通过 W3C验证的代码 (如: cursor:hand;)放到另一个文件中,再用下面的方法导入. 22.jpg

相关文章更多 >

© 2024版权所有 水水网

电话:171780793