奇幻城娱乐app_奇幻城娱乐手机版
做最好的网站
来自 奇幻城科技资讯 2019-08-01 06:06 的文章
当前位置: 奇幻城娱乐app > 奇幻城科技资讯 > 正文

奇幻城娱乐app:针对各种浏览器css不兼容的写法

谁说死敌间不能偶尔展现一下对对方的敬重?继续从 FF2 推出时留下来的传统,IE 团队在 FF3 正式上路的今天送给 Mozilla 团队一颗 IE 图样的大蛋糕。喔对了,这颗蛋糕不是个谎言

就在 IE9 正式上线后一个礼拜,Firefox 4 也要跟着上线了,预计推出的时间是在美西时间 3/22 日的早上七点(我们的晚上 10 点)。目前听起来到时候正式推出的 Firefox4 和稍早在 3/9 开放下载的 RC 应该是相同的版本,所以除非 FF 团队在这段时间内发现什么超级大 Bug,不然等不及的朋友理论上现在就可以下载 FF4 RC 回来享受硬件加速 Render 的快感了。当然,和 IE9 推出的时间离得这么近,被拿来和刚释放原力的 IE9 拿来比是免不了的了。IE9 在 24 小时内有 235 万人下载,小火狐呢?让我们拭目以待吧!

 

/*针对谷歌浏览器内核支持的CSS样式*/
@media screen and (-webkit-min-device-pixel-ratio:0) {

奇幻城娱乐app 1

HACK原理:不同浏览器对各中字符的识别不同 (读完文章你会发现,FF和IE8对以下字符的识别能力完全相同)

样式

在 CSS中常用特殊字符识别表:

}

(1)*:  IE6 IE7都能识别*,而标准浏览器FF IE8是不能识别*的;

/*针对IE6特制识别的CSS样式*/
*HTML .SearchBox
{

(2)!important: 除IE6不能识别 !important外,  FF IE8 IE7都能识别!important ;

样式

(3)_ : 除IE6支持_ 外,  FF IE8 IE7都不支持_;

}

(4)9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)

针对Firefox浏览器的内核CSS写法:
@-moz-document url-prefix() {
.font1 {color:red}
}

 

IE8就是自己来调试了。调试一个浏览器,有不合适的地方可以在该内核css中重写对应的方法,只需把不合适的样式重写即可实现。*HTML中则例外,需要每重写一个都要加*HTML单独处理。
针对样式名

示例:

如果只让ie6看见用*html .head{color:#000;}
如果只让ie7看见用* html .head{color:#000;}
如果只让ff看见用:root body .head{color:#000;}
如果只让ff、IE8看见用html>/**/body .head{color:#000;}
如果只是不让ie6看见用html>body .head{color:#000;} 即对IE 6无效
如果只是不让ff、IE8看见用*body .head{color:#000;}    即对ff、IE8无效

(1)区别FF(IE8)与IE6 IE7

针对具体属性

backgorund:orange; FF和IE8背景色将为橘黄色

如果只让ie6看见用_     .head{_color:#000;}
如果只让ie7看见用 与_结合的方法:     .head{ color:#f00;!;_color:#000;}

*backgorund:red;   IE6和IE7背景色将为红色

IE8正式版hack

(2)区别FF(IE8)与IE6与IE7

9″ 例:”margin:0px auto9;”.这里的”9″可以区别所有IE8和FireFox.
“*” IE6、IE7可以识别.IE8、FireFox不能.
“_” IE6可以识别”_”,IE7、IE8、FireFox不能.
如:
.a {color:#f00;     color:#f609;    color:#00FF00;    _color:#0000FF; }

background:orange;   FF和IE8背景色将为橘黄色

从左到右分别对应 FF,IE8 IE7 IE6

P{ color:#f00;}                支持 IE7 IE6        不支持 FF  IE8b
P{_color:#f00;}                支持ie6            不支持 FF
P{color:#f00; !important;}   
P{color:#f00;}                支持 IE6 IE7 IE8b FF
P{color:#00f !important;color:#f00; }     支持IE7 IE8b FF     不支持IE6
head:first-child body p{color:#f00;}    支持IE7 IE8b FF       不支持IE6

/**//*/
/**/                    支持IE8b            不支持IE6 IE7 FF
html*{color:#f00}            支持IE6 IE7          不支持 IE8b FF
body>p{color:#f00}            支持IE7 IE8b FF        不支持 IE6
html[xmlns] p {color:#f00}        支持 IE7 IE8b FF    不支持 IE6
@import "style.css"
@import "style.css"
@import url(style.css)
@import url('style.css')
@import url("style.css")        支持 IE6 IE7 IE8b FF

P{/*/*color:#f00;/* */}            支持 IE6 IE7  FF     不支持 IE8b

*background:red !important;  IE7背景色将为红色

*background:blue;     IE6背景色将为蓝色

(3)区别FF(IE8)与IE6与IE7

background:orange;        FF和IE8背景色将为橘黄色

*background:red;          IE7背景色将为红色

_background:blue;         IE6背景色将为蓝色

(4)区别FF与IE6 IE7 E8

color:gray;       FF等非IE浏览器字体色将为灰色

color:red9;     IE8 IE9字体色将为红色

*color:green;     IE7字体色将为绿色

_color:blue;     IE6字体色将为蓝色

提示:CSS HACK书写顺序:先写FF等非IE浏览器所需样式,其次写IE8所需样式,接着是IE7的,再接着才是IE6的!

总结:实际运用中我感觉比较少用到!important ,只要你记住”*”和”_”我想就足够区别于FF(IE8)与IE6与IE7了.

 

浏览器兼容代码:

 

 

 

浏览器

符号

IE6

IE7

IE8

FF

*

×

×

!important

×

×

_

×

×

×

9

×

×

×

*html

×

×

×

* html

×

×

×

本文由奇幻城娱乐app发布于奇幻城科技资讯,转载请注明出处:奇幻城娱乐app:针对各种浏览器css不兼容的写法

关键词: 奇幻城娱乐app