各种浏览器兼容篡位的css样式写法

谷歌浏览器的识别
@media screen and (-webkit-min-device-pixel-ratio:0) {
    height:10px;
}

IE6特制识别的
*HTML .SearchBox {
    height:10px;
}

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

二、针对样式名
如果只让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无效

三、针对具体属性
如果只让ie6看见用
.head{_color:#000;}
如果只让ie7看见用+与_结合的方法
.head{+color:#f00;!;_color:#000;}
IE8正式版hack"\9″
例：”margin:0px auto\9;”
这里的”\9″可以区别所有IE8和FireFox.
"*"IE6、IE7可以识别.IE8、FireFox不能.
“_”IE6可以识别”_”,IE7、IE8、FireFox不能.
如：
.a {color:#f00;
 

color:#f60\9;

+color:#00FF00;

_color:#0000FF;

}

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

还有写css样式一定要记住顺序：

以下为引用的内容：

#1 { color: #333; }

* html #1 { color: #666; }

*+html #1 { color: #999; }

顺序很重要

四、针对各种浏览器css不兼容的写法

P{+color:#f00;} 支持IE7 IE6不支持FF IE8

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} 支持IE7 IE6不支持FF IE8

body>p{color:#f00} 支持IE7 IE8b FF不支持IE6

html[xmlns] p {color:#f00} 支持IE7 IE8b FF不支持IE6

@import "style.css"

@import url(style.css)

@import url(‘style.css‘)

@import url("style.css")

支持IE6 IE7 IE8b FF

P{} 支持IE6 IE7 FF不支持IE8b

五、CSS技巧 
FF与IE

1. Div居中问题

div设置margin-left, margin-right 为auto 时已经居中，IE
不行，IE需要设定body居中，首先在父级元素定义text-algin:
center;这个的意思就是在父级元素内的内容居中。

2.链接(a标签)的边框与背景a 链接加边框和背景色，需设置display:
block,同时设置float:left保证不换行。

3.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,

很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序:L-V-H-A

Code:

4.游标手指cursor cursor: pointer 可以同时在IE FF 中显示游标手指状，hand仅IE可以

5.UL的padding与marginul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义ul{margin:0;padding:0;}就能解决大部分问题

6.
FORM标签这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了所以后面就不会为这个头疼了.

7. BOX模型解释不一致问题在FF和IE中的BOX模型解释不一致导致相差2px

解决方法：

div{margin:30px!important;margin:28px;}

margin顺序不能写反important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写

margin:xx px!important;

#box{

width:600px;

//for ie6.0-w\idth:500px;

//for ff+ie6.0

}

#box{ width:600px!important //for ff

width:600px; //for ff+ie6.0 width

:500px; //for ie6.0-

}

8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)p[id]{}div[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中所有p标签中有id的都是同样式的.

9.最狠的手段-!important;如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”

会自动优先解析,然而IE则会忽略.

如下

.tabd1{

background:url(/res/images/up/tab1.gif) no-repeat 0px 0px
!important;

background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; }

值得注意的是，一定要将xxxx !important这句放置在另一句之上，上面已经提过

10.IE,FF的默认值问题或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$
IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容IE和FF的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。

我们都知道，浏览器在显示网页的时候，都会根据网页的css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，如果在css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现IE和FF显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。

11.为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,

那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px;这里为了照顾

不认识min-height的IE6可以这样定义:

{ height:auto!important; height:200px; min-height:200px; }

12.FireFox下如何使连续长字段自动换行众所周知IE中直接使用

word-wrap:break-word就可以 了，FF中合用js插入
的方法来处理

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

type="text/javascrīpt">

function toBreakWord(el,intLen){

var
obj=document.getElementByIdx_x(el);

var
strContent=obj.innerHTML;

var
strTemp="";

while(strContent.length>intLen){

strTemp+=strContent.substr(0,intLen)+"
";

strContent=strContent.substr(intLen,strContent.length);

}

strTemp+="
"+strContent;

obj.innerHTML=strTemp; } if(document.getElementByIdx_x &&
!document.all) toBreakWord("ff", 37);

时间： 2024-10-14 03:32:10

各种浏览器兼容篡位的css样式写法的相关文章

在不同的浏览器使用不同的css样式,解决浏览器兼容问题

区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !important;       background:blue; 区别IE7与FF:       background:orange;        *background:green;       方法一:在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE,例如:

如何让不同浏览器调用不同的CSS样式

由 于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭.以目前市场占有率最高的两个浏览器Microsoft Internet Explorer和Mozilla Firefox为例,前者对标准的支持明显不如后者,网页设计人员不得不花费大量的时间和精力来调整代码以保持网页在二者中呈现的一致性——这是件非常痛 苦的事情,顾此失彼的情况时有发生.但放弃任何一方的用户都是不明智的,以北极冰仔部落格来说,使用IE的访问者占所有访问者的49.57%,使用 Firefox

解决各版本不同浏览器兼容行的CSS Hack

/* CSS属性级Hack */ color:red; /* 所有浏览器可识别*/ _color:red; /* 仅IE6 识别 */ *color:red; /* IE6.IE7 识别 */ +color:red; /* IE6.IE7 识别 */ *+color:red; /* IE6.IE7 识别 */ [color:red; /* IE6.IE7 识别 */ color:red\9; /* IE6.IE7.IE8.IE9 识别 */ color:red\0; /* IE8.IE9 识别*

CSS浏览器兼容

CSS 浏览器兼容知识汇总 CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行. 2.margin加倍的问题 问题描述:设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug. 解决方案:在这个div里面加上display:inline; 示例讲解:<div id="imfloat"><

CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

常见的浏览器兼容问题和解决方法

为什么会有兼容问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容. 使用Trident内核的浏览器:IE.Maxthon.TT: 使用Gecko内核的浏览器:Netcape6及以上版本.FireFox: 使用Presto内核的浏览器:Opera7及以上版本: 使用Webkit内核的浏览器:Safari.Chrome. 而我现在所说的兼容性问题,主

浏览器兼容代码

兼容IE <meta http-equiv="X-UA-Compatible" content="IE=edge"> H5兼容代码:设置css样式全局<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-den

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

（转）Css样式兼容IE6,IE7,FIREFOX的写法

根据FF和IE对一些符号识别的差异,我们可以单独对FF以及IE定义样式,例子: 区别IE6与FF:          background:orange;*background:blue;   区别IE6与IE7:          background:green !important;background:blue;   区别IE7与FF:          background:orange; *background:green;   区别FF,IE7,IE6:          back