浏览器兼容解决FF/IE6/IE7背景专用CSS HACK

自从互联网开始的那一刻起，各浏览器间的争斗就没有停止过。当然其中最苦的就是网页制作人员了，为了达到用户体验以及可用性的标准，不得不在多个浏览器上为统一效果而奔波。真希望哪一天FF可以一统天下，虽然现在还是IE的大天下。特别是微软最新发布的IE7浏览器，其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担。
为了让各浏览器有同样的显示效果，我们不得不用到CSS HACK。当然在这篇文章中我们只谈现在使用率最高的IE6和FF，以及将来可能会成为主流的IE7的CSS HACK，至于IE6以下版本已OP、SF在这此先不详细说明。新手看了这片文章一定会有所收获，而高手们路过一下就可以了，呵呵！

方案一
先来看看下面的CSS代码：

background-color:orange; 
*background-color:blue!important; 
*background-color:red;

我们-www.jb51.net css test

.bgc{
width:200px;
height:200px;
background-color:orange;
*background-color:blue!important;
*background-color:red;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下面我简单解释一下各浏览器怎样理解这三个属性：
在FF下，第2、3个属性不认识，其中第2个属性如果只是加了!important的话FF一定认识的，但因为前面又加了个*，所以不认识了（仅IE7认识）。所以它读的是background-color:orange;
在IE7下，第1、2、3个属性IE7虽然都认识，但!important表示的是优先，所以它读的是*background-color:blue!important;
在IE6下，第2个属性不认识，第1、3个属性都认识，但因为第3个属性覆盖掉第1个属性，所以IE6最终读取的*background-color:red。

方案二
先来看看下面的CSS代码：


代码如下:

background-color:orange;   
*background-color:blue;   
_background-color:red;

css test 我们-www.jb51.net

.bgc{
width:200px;
height:200px;
background-color:orange;
*background-color:blue;
_background-color:red;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下面我简单解释一下各浏览器怎样理解这三个属性：
在FF下，第2、3个属性FF不认识，所以它读的是background-color:orange;
在IE7下，第3个属性IE7不认识，所以它读第1、2个属性，又因为第2个属性覆盖了第1个属性，所以IE7最终读出的是第2个属性*background-color:blue;
在IE6下，这3个属性IE6都认识，所以3个属性都可以读取，又因为第3个属性覆盖掉前2个属性，所以IE6最终读取的是_background-color:red。

其中IE的读取属性一定要知道，这对初学者而言使用CSS HACK是非常至关重要的，浏览器读取属性是从上至下的，也就是说同样属性的设置最后一个读取到的才是在浏览器上显示的。此外在方案二种的“_”这是只有IE6才认识的，可见其大胃王的感觉。另外!important不同，它打破了从上至下的读取习惯，使用的是优先显示。而在上述两个方案中可以看出FF除了正规CSS书写和!important外其它都不认识，标准就是统一的。

在这里并不是怂恿大家鼓励使用CSS HACK，只是别看到其他人写的CSS代码中有这些HACK不知道是什么意思。毕竟用CSS HACK来解决浏览器间的兼容并不是长远方法，如果新版本浏览器的出现说不定会把你原来写的CSS HACK怎样，IE7就是个很好的例子。尽量达到零使用CSS HACK或者说少使用，因为好的布局结构是可以很好解决这些问题，这样的网站也大有人在。

赞 (0)

相关推荐

  • 常见的浏览器Hack技巧整理

    常见的浏览器Hack技巧整理

    常见的浏览器Hack技巧整理 如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题.而浏览器兼容问题大部分也集中在对IE系列的兼容.这里就总结一下对IE系列的CSS Hack,记录一下,方便以后查阅. IE Hack IE系列浏览器的hack大略如下: _nowamagic:1px;-----------ie6 *nowamagic:1px;-----------ie7 nowamagic:1px\0;----------ie89 nowamagic:1px\9\0;----

  • CSS Hack 汇总速查手册浏览器兼容必会

    屏蔽IE浏览器(也就是IE下不显示) 复制代码 代码如下: *:lang(zh) select {font:12px !important;} /*FF 可见,特别声明:由于Opera最新的更新,此句目前已经成为FF的专用HACK*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 复制代码 代码如下: *+html {-} 当面临需要只针对IE7

  • CSS hack浏览器兼容一览表

    CSS hack浏览器兼容一览表

    CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.

  • 浏览器兼容解决FF/IE6/IE7背景专用CSS HACK

    自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过.当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波.真希望哪一天FF可以一统天下,虽然现在还是IE的大天下.特别是微软最新发布的IE7浏览器,其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担. 为了让各浏览器有同样的显示效果,我们不得不用到CSS HACK.当然在这篇文章中我们只谈现在使用率最高的IE6和FF,以及将来可能会成为主流的IE7的CSS HACK,至于IE6以下

  • 用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]

    用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]

    screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.blu

  • HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 使用他们能让代码

  • 特牛的FF/IE6/IE7专用CSS HACK

    这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK是针对class.id中属性的HACK,排列的顺序都具有要求.今天要和大家说的是针对class.id所做的CSS HACK. 复制代码 代码如下: .test{/*FF*/ height:20px; background-color:orange; } *+html .test{/*IE7*/ height:20px; background-color:blue; } *html .test{/*IE6*/ height:20p

  • 多浏览器兼容的动态加载 JavaScript 与 CSS第1/2页

    在介绍ensure内部的实现之前,让我们先来看看其功能: ensure({ html: "popup.html", javascript: "popup.js", css: "popup.css" }, function() { Popup.show("hello world"); } ); 在这段代码中,ensure首先会确保popup.html.popup.js.popup.css这3个文件的加载,如果都没加载过ensur

  • 通过CSS Hack 区分 FF/IE7/IE6/IE5.5/IE5 代码推荐

    通过CSS Hack 区分 FX/IE7/IE6/IE5.5/IE5 #example{color:red ;} * html #example{color:blue;} *+html #example{color:green;} 这是在 FireFox 或者 Opera 下面的效果 这是在 IE 6 下面的效果 这是在 IE 7 下面的效果 以下为简单区分FF/IE6/IE7示例 这行文字在FF下应为红色,在IE6下应为蓝色,在IE7下应为绿色. [Ctrl+A 全选 注:如需引入外部Js需刷

  • CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

  • js实现连续英文字符自动换行兼容ie6 ie7和firefox

    复制代码 代码如下: irefox中连续英文字符如果要CSS控制强制换行,探索了N久,发现是实现不了的逼不得已的时候就用js脚本进行控制吧 英文字符自动换行,通过js脚本截断字符串,此方法通用ie6,ie7,firefox兼容解决办法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  • js判断IE6/IE7/FF的代码[XMLHttpRequest]

    大家有的时候想在页面中加一些东东,又限于浏览器的不同,效果不尽都能表现出来,这下我们可以想到浏览器的判断,根据不同的浏览器给出不同的展示效果,是不是很炫呢?那当然,你能想到的很多人都能想的到,就好像大楚网的广告添加方法,真是让我见识到了真正的JS高手是如何练就的了,废话不说了,看代码: 复制代码 代码如下: if (window.XMLHttpRequest) { //Mozilla, Safari,IE7 alert('Mozilla, Safari,IE7 '); if(!window.Ac

  • 网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容

    网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容 网页布局+纯CSS纵向下拉菜单 *{ margin:0; padding:0; border:0; } html{ background:#bfc4c7;/*背景颜色*/ } body{ font:12px/150% '宋体'; margin:0 auto; width:770px; text-align:center; } #menu,#nav,#footer{ clear:both; } #nav{ padding-left:20px; t

随机推荐