CSS设计中的HACK,CSS解决方案

CSS对IE7,IE6,FireFox和其它不同浏览器的控制——CSS设计中的HACK,CSS解决方案[集合版]

IE7终于向标准更迈进一步了,!important支持了,原来的width+margin+border+padding的问题也好了。

我相信一样还会有很多的人遇到和我一样的问题,我绝对相信,因为我在网上看到很多人在讨论这个问题,我在网上搜索了好些天,找到了一些解决不同浏览器中CSS的问题。希望对你们能有些帮助!

Hack

相信很多人听说过Hack,就是在CSS代码里加入一些如* html,+hmtl, /**/,这些代码在IE里能被识别,其它浏览器不能,也有些IE6可以,IE7不能识别,就是通过这样的方法,来写针对不同浏览器的CSS代码。

这里有几篇文章是介绍Hack的,还有收集了目前的一些Hack,可以点过去看看。先别急着点,继续往下看吧。最后我才把链接贴上,因为下面的内容更重要。比你漫无目的找HACK实用。

 这里介绍几个经典的区别不同浏览器,CSS hack写法太多了,也很杂,这里我就介绍几款实用的,又容易记的写法:

------------------------------经典方案一---------------------------------

注:IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!important;FF不能识别*,但能识别!important;

写两句代码来控制一个属性,区别Firefox与IE6:
background:orange;*background:blue;

//这一句代码写出来时,你用firefox或其它非IE浏览时,会发现,写了该代码的区域背景是橙色的,如果用IE浏览,却是蓝色的,这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;

写两句代码来控制一个属性,区别IE7与IE6:
background:green !important;background:blue;

//这一句代码写出来时,你用IE7浏览,会发现,写了该代码的区域背景是绿色的,如果用IE6浏览,却是蓝色的,这是因为IE7能识别!important*,一但识别了,就执行,忽略了后面的那一句,但IE6却不能识别!important,所以前面部分跳过,直接执行了后半部份。

写两句代码来控制一个属性,区别Firefox与IE:
background:orange; *background:green;

//这一句代码写出来时,你用Firefox浏览,会发现背景是橙色的,而IE里却是绿色的,很简单,因为Firefox不能识别*,而IE6,IE7都可以识*

写三句代码来控制一个属性,区别Firefox,IE7,IE6:
background:orange;*background:green !important;*background:blue;

//这一句会使在Firefox在,背景呈橙色,IE7中为绿色,IE6中为蓝色,道理和前面一样,Firefox不能识别*,所以后面两句都不执行,直接执行第一句,IE7当然也能执行第一行代码,但是因为第二句,他也能识别,所以就执行了第二句代码,把前面的效果给过滤了,而最后一句,IE7是不能识别的。IE6不能识别!imprtant,本来运行了第一句代码了,第二句不能识别,那就理所当然的执行了最后一句。

以上HACK用法,可以实现不同浏览器的CSS代码,但是却不能通过CSS代码验证工具的验证!其实通不通过都无所谓,主要是实用,至少我是这样认为。如果你想要写能通过验证的HACK。那么请继续往下看第二种方案。

附加一個頹廢的剌猥發現的HACK,就是在IE6,還能識別全角的字符,IE7不行,這個也可以利用。在百度空間中,這個方法在2007-04-29日,還沒被過濾!

--------------------------------经典方案二------------------------------------

下面介绍用* html,* +html的hack写法,此方法可以通过CSS验证,也比较规范。哈哈,HACK本来是不归范的产物,只是我个人认为这种Hack写法是Hack写法中的规范而已,不要拿东西砸我!!!

我写一个例子

#sample {background:red;}

* html #sample {backgroud:green;}

* +html #sample{backgroud:blue}

在DW中建立一个sample层,写入以上代码,运行一下看看,你会在Firefox或是Netscape或Opera中看到,sample的背景色是红色的。在IE6中看到背景色是绿色的,而在IE7中却是蓝色的。好玩吧~

同样,你也可以应用到class和body中去,一样的道理,三个写法:

第一个是标准写法,针对所有浏览器都有效,但是一样的CSS在不同的浏览器中会变形,这个道理你明白吧,要不然你也不会来看我这篇文章了。Firefox,Oprea等非IE浏览器,不识别下面两种写法,所以理所当然的执行了第一种CSS代码,为红色背景。

第二个是只针对IE6,只有IE6会执行,其它浏览器都不执行。那么Firefox,IE7都不会读到这里的代码,IE6本来第一种是能执行的,可是因为第二种能识别,所以过滤了第一种的红色效果,变成了绿色背景。

第三个只针对IE7,只有IE7才能执行。IE6,firefox都不识别,当然只有IE7自己执行啦,同样的道理,能执行第一种,变成红色,可又被第三种过滤成蓝色背景。

---------------------------------第三种方案(强力推荐)--------------------------------

这里先说声不好意思,第三种方案不是用HACK,哈哈,但是绝对是最好用的。

第一种或是第二种方案,写出来的CSS文件代码长的很,特别是第二种,这样载入CSS时,会很缓慢,对网站设计没有好处。如果你做的是比较大的网站,还是建议你用下面这种方法,就是通过javascript判断浏览器的类型,然后针对不同的浏览器链接不同的CSS文件。

我们针对不同的浏览器开发出不同的CSS文件,一个针对IE,一个针对Firefox,一个针对其它所有类型的浏览。这样,我们在设计时,就不用去考虑太多,只要我这个CSS能在FF中正常显示,我就不管IE下执行下怎么样了,同样IE中正常的CSS,也不去管它在FF中会是显示如何的乱。

首先,我们在HTML代码里要放入 标签,标签里先写入默认要用到的CSS文件的位置,建议放IE中用到的CSS文件,比如 ,这样能避免在对方浏览器没有开启javascript的时候,无法判断浏览器类型的时候,也能以90%以上人使用的IE正常显示。

把下面这段JS放在HEAD中
window.navigator.userAgent.indexOf后面是浏览器的类型,如果是Opera的话,还可以加一条if来判断,用javascript的条件判断去写吧,我这里不多说了。

放好你的CSS的位置,试一下看看,是不是不同的浏览器分别调用了不同的CSS文件啊。爽!

好了,到这里,相信你明白第三种方案的好处了吧。我喜欢最后这一种多一点。其实第三种方法还能更进一步的设计,比如我,这次做的网站,只实现在IE6和IE7中正常浏览,其它的,我可不管,不要骂我支撑了MS的霸权,但是人家公司啊,会去看他们网站的,都是一般客户,一般客户都是用IE的,我们技术人员才会用Firefox,Opera。所以我加入了alert,弹出窗口,不信你用Firefox浏览一下我做的网站,创汇科技,如何?是不是弹出窗口,告诉你说可能会不正常,建议你用IE的对话框。

文章转自:上里巴人的博客

查看 CSS WEB ie hack的相关文章

转载本站原创文章请注明:文章转自 灰狼IT路,链接: https://itlu.org/articles/1328.html

仅有 1 条评论

  1. CSS HACK,是一门很深奥的课程,等IE9出来,CSS HACK就更是了

添加新评论