机器人研究所—机器人品牌|机器人公司
帐号
密码

密码找回? 注册?

【浏览器兼容hack】

发布时间:2016-04-20

收藏

内容

【浏览器兼容hack】【兼容注意:碰到如只有IE6这样的浏览器出现问题的情况如果不容易找出问题,那么最好给该范围内的元素都加上背景色来判断出问题的地方,可


以得到很好的效果。】

                                

IE6 7 8 9 FF浏览器兼容(例子)

#test{

background:red;/*用于所有浏览器*/


_background:red;/*用于IE6*/

*background:red;/*用于IE6和IE7都可以*/

background:red\0;/*用于IE8和IE9*/

background:red\9\0;/*用于IE9*/【貌似直接\9就行了而不用\0】

background:red!important;/*用于除了IE6以外的浏览器*/// 好像不对。。


background/*\**/:red\9; /* 所有IE浏览器*/【或者可以说是除了FF浏览器,因为我做的都是针对FF和IE几个版本的兼容。】

}


原理:

FF不能识别*和_

IE6只能识别*

IE7只能识别_

!important只有IE6不能识别。


【注意:!important用法】:【必须要有两个一样的CSS属性,important必须在另一个属性前IE6才不识别,要不然IE6还是识别的。】


【另外注意】!important可以覆盖html里写的style样式(包括标签里写是style=""),但必须写在style的后面。

比如:

xxx{

background:red;

background:#000000!important;

}

//这样IE6任然能识别importan,

xxx{

background:#000000!important;

background:red;

}

//把importan放到另一个同样属性的前面,这样IE6就不会识别importan。



【其他hack】(没试过)

IE&FF浏览器 css hack集,不知道css hack的朋友可以看下建站学的【DIV+CSS入门教程】CSS Hack 一文。 


1.‘\9’: 

    eg:.test { color/*\**/: blue\9 }

        


.header {width:300px;} /* 所有浏览器*/

.header {width/*\**/:330px\9;} /* 所有浏览器IE浏览器 */

.header {*width:310px;} /* IE7和IE6能识别,IE8和FF不能识别*/

.header {_width:290px;} /* IE6能识别,IE7、IE8和FF不能识别*/

2.利用条件注释语句:<!&ndash;[if IE]> 此内容只有IE可见 <![endif]–>         


                lt 表示less than 当前条件版本以下的版本,不包含当前版本。


                gte 表示greeter than or equal 当前版本以上版本,并包含当前版本。


                lte 表示less than or equal 当前版本以下版本,并包含当前版本。


3.其它hack 技术:



.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/

.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/

.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/

.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/

 

 

#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支持 */


-


评论

桂ICP备13000955号-5