使用Trident内核的浏览器:IE、Maxthon、TT; 使用Gecko内核的浏览器:Netcape6及以上版本、FireFox; 使用Presto内核的浏览器:Opera7及以上版本; 使用Webkit内核的浏览器:Safari、Chrome。
而我现在所说的兼容性问题,主要是说IE与几个主流浏览器如firefox,google等。而对IE浏览器来说,IE7又是个跨度,因为之前的版本更新甚慢,bug甚多。从IE8开始,IE浏览器渐渐遵循标准,到IE9后由于大家都一致认为标准很重要,可以说在兼容性上比较好了,但是在中国来说,由于xp的占有率问题,使用IE7以下的用户仍然很多,所以我们不得不考虑低版本浏览器的兼容。
对浏览器兼容问题,一般分,HTML,Javascript兼容,CSS兼容。 其中html相关问题比较容易处理,无非是高版本浏览器用了低版本浏览器无法识别的元素,导致其不能解析,所以平时注意一点就是。特别是HTML5增加了许多新标签,低版本浏览器有点影响时代进步啊
问题一:不同浏览器的标签默认的外补丁和内补丁不同
问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率:100%
解决方案:css里 *{margin:0padding:0}
备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。
问题二:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大
问题症状:常见症状是ie6中后面的一块被顶到下一行
碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)
解决方案:在float的标签样式控制中加入 display:inline将其转化为行内属性
备注:我们最常用的就是div+css布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。
问题三:设置较小高度标签(一般小于10px),在ie6,ie7,遨游中高度超出自己设置高度
问题症状:ie6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
碰到频率:60%
解决方案:给超出高度的标签设置overflow:hidden或者设置行高line-height 小于你设置的高度。
备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。
问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,ie6间距bug(类似第二种)
问题症状:ie6里的间距比超过设置的间距
碰到几率:20%
解决方案:在display:block后面加入display:inlinedisplay:table
备注:行内属性标签,为了设置宽高,我们需要设置display:block(除了input标签比较特殊)。在用float布局并有横向的margin后,在ie6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
问题五:图片默认有间距
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加上问题一中提到的通配符也不起作用。
碰到几率:20%
解决方案:使用float属性为img布局
备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道
问题六:标签最低高度设置min-height不兼容
问题症状:因为min-height本身就是一个不兼容的css属性,所以设置min-height时不能很好的被各个浏览器兼容
碰到几率:5%
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200pxheight:auto !importantheight:200pxoverflow:visible}
备注:在B/S系统前端开时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。
问题七:透明度的兼容css设置
方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。1技巧一:css hack
使用hacker 我可以把浏览器分为3类:ie6 ;ie7和遨游;其他(ie8 chrome ff safari opera等)
ie6认识的hacker 是下划线_ 和星号 *
ie7 遨游认识的hacker是星号 * (包括上面问题6中的 !important也算是hack的一种。不过实用性较小。)
比如这样一个css设置 height:300px*height:200px_height:100pxie6浏览器在读到 height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt, 所以当ie6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,ie6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;ie7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px;
剩下的浏览器只认识第一个height:300px所以他们会把高度解析为300px。1234
因为优先级相同且相冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。
/* 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 识别*/color:red\9\0/* 仅IE9识别 */color:red \0/* 仅IE9识别 */color:red!important/* IE6 不识别!important 有危险*//* CSS选择符级Hack */ *html #demo { color:red} /* 仅IE6 识别 */*+html #demo { color:red} /* 仅IE7 识别 */body:nth-of-type(1) #demo { color:red} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别*/ head:first-child+body #demo { color:red} /* IE7+、FF、Chrome、Safari、Opera 可以识别 */:root #demo { color:red\9} : /* 仅IE9识别 */123456789101112131415161718192021222324252627282930313233
越少的浮动,就会越少的代码,会有更灵活的页面,会有扩展性更强的页面。这不多说,归结为到一定水平了,浮动会用的较少。另外,您也会避免使用浮动+margin的用法。所以,越后来越不易遇到这种bug。
技巧二:padding,marign,height,width
注意是技巧,不是方法: 写好标准头 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> http://www.w3.org/1999/xhtml”> 尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div宽尽量用margin,慎用padding,width算准实际要的减去padding
技巧三:显示类(display:block,inline)
display:block,inline两个元素display:block//可以为内嵌元素模拟为块元素display:inline//实现同一行排列的的效果display:table//for FF,模拟table的效果1234567
display:block块元素,元素的特点是: 总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度
display:inline就是将元素显示为行内元素,元素的特点是:和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。span,a,label,input,img,strong和em是 inline 元素的例子
技巧四:怎样使一个div层居中于浏览器中?
1)
<style type="text/css"><!-- div {position:absolutetop:50%left:50%margin:-100px 0 0 -100pxwidth:200pxheight:200pxborder:1px solid red} --></style>123456789101112131415161718192)div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto
技巧五:float的div闭合清除浮动自适应高度
① 例如:<div id="floatA"><div id="floatB"><div id="NOTfloatC">
这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为float:left)
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在<divclass="floatB"><div class="NOTfloatC">之间加上<div class="clear">这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可:.clear{clear:both}
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应,要在wrapper里面加上overflow:hidden当包含float的box的时候,高度自适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1可以做到,这样就达到了兼容。
例如某一个wrapper如下定义:
.colwrapper{overflow:hiddenzoom:1margin:5px auto}1③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
<div id=”page”><div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>1234567
比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left centerright的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决:
<div id=”page”><div id=”bg” style=”float:leftwidth:100%”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
</div>1234567891011
再嵌入一个float left而宽度是100%的DIV解决之。
④万能float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To ClearFloats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix”即可,屡试不爽。
/* Clear Fix */ .clearfix:after { content:"."display:blockheight:0clear:bothvisibility:hidden} .clearfix { display:inline-block} /* Hide from IE Mac */ .clearfix {display:block} /* End hide from IE Mac */ /* end of clearfix */1234567或者这样设置:.hackbox{display:table//将对象作为块元素级的表格显示}
技巧六:div嵌套时 y轴上 padding和 marign的问题
FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
FF里 y 轴上 父padding=0 且 border=0 时,子div 到 父div 的距离为0,子marign 作用到 父div 外面
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline/***************************这里细说一下block与inline两个元素**************************/
:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素)Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元 素)#box{ display:block//可以为内嵌元素模拟为块元素 display:inline//实现同一行排列的效果 diplay:table
/******************************IE 不认得min-这个定义***************************/
,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,
如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。 比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,
可以这样: #boxhtml>body #box
5、/*******************页面的最小宽度**************************************************/
min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令 在IE上也能用,可以把一个<div>放到 <body>标签下,然后为div指定一个类, 然后CSS这样设计:
#container 第一个min-width是正常的;
但第2行的width使用了 Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
/*************************6.DIV浮动IE文本产生3象素的bug*****************************/
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距. #box#left
#right*html #left <div id="box"> <div id="left"></div> <div id="right"></div> </div>
/*****************************7.IE捉迷藏的问题**************************************/
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
/*****************8.float的div闭合清除浮动自适应高度***************************/
① 例如:<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移,而是希望往下排。
(其中floatA、floatB的属性已经设置为 float:left)这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。
在 <#div class=”floatB”><#div class=”NOTfloatC”>之间加上 <#div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,
否则会产生异常。 并且将clear这种样式定义为为如下即可: .clear
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应,要在wrapper里面加上overflow:hidden当包含float的 box的时候,高度自动适应在IE下无效,
这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1可以做到,这样就达到了兼容.
例如某一个wrapper如下定义:.colwrapper
③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如: <div id=”page”><div id=”left”></div>
<div id=”center”></div><div id=”right”></div></div>比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下
拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决
<div id=”page”> <div id=”bg” style=”float:leftwidth:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一个float left而宽度是100%的DIV解决之
④万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上
class="clearfix" 即可,屡试不爽. /* Clear Fix */ .clearfix:after
.clearfix /* Hide from IE Mac */ .clearfix /* End hide from IE Mac */ /* end of clearfix */
或者这样设置:.hackbox
/*******高度不能自适应*********************************/
11.高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。
例:#box #box p <div id="box"><p>p对象中的内容</p></div> 解决方法:在P对象上下各加2个空的div对象CSS代码:.1或者为DIV加上border属性。
12、/******IE6下为什么图片下有空隙产生********************/
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
13./******如何对齐文本与文本输入框*************************/
加上 vertical-align:middle<style type="text/css"><!-- input --></style>
/*********************14.web标准中定义id与class有什么区别**********************************/
一.web标准中是不容许重复ID的,比如 div id="aa"不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题 ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,
远远不如一个ID来得简单.
/*************15. LI中内容超过长度后以省略号显示的方法***************************/
此方法适用与IE与OP浏览器 <style type="text/css">
<!-- li --></style>
16、滚动条颜色的设置问题/****************为什么web标准中IE无法设置滚动条颜色***************/
解决办法是将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<style type="text/css">
<!-- html { scrollbar-face-color:#f6f6f6scrollbar-highlight-color:#fff scrollbar-shadow-color:#eeeeeescrollbar-3dlight-color:#eeeeeescrollbar-arrow-
color:#000 scrollbar-track-color:#fff scrollbar-darkshadow-color:#fff } --></style>
17./************为什么无法定义1px左右高度的容器**********************************/
E6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
18./*****************怎么样才能让层显示在FLASH之上呢******************************/
解决的办法是给FLASH设置透明 <param name="wmode" value="transparent" />
19./***************************怎样使一个层垂直居中于浏览器中************************/
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
<style type="text/css">
<!-- div
-->
</style>
/*************************************************************************************************************************************************************************************************************************火狐浏览器和IE兼容性的问题解决******************************************************************************************************************/
1. Div居中问题
div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center这个的意思就是在父级元素内的内容居中。
2.链接(a标签)的边框与背景
a 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height,
可以在 menubar 中插入一个空格。
3.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code: <style type="text/css">
<!-- a:link a:hover --></style>
4. 游标手指cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
5.UL的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul就能解决大部分问题
6. FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式
ul,form给定义死了,所以后面就不会为这个头疼了.
7. BOX模型解释不一致问题
在FF和IE 中的BOX模型解释不一致导致相差2px解决方法:div 注意这两个 margin的顺序一定不能写反, important这个属性IE不能识别,
但别的浏览器可以识别。所以在IE下其实解释成这样:div 重复定义的话按照最后一个来执行,所以不可以只写margin:xx px!important
#box #box
8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[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/*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px/* Style for IE */}值得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过
10.IE,FF的默认值问题
或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然后一边写css,一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面,IE并没有我们想象的那么可恶, 关键在于IE和FF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FF和IE的css并不是那么困难,或许对于简单的css,你完全可以不用”!important”这个东西了。 我们都知道,浏览器在显示网页的时候,都会根据网页的 css样式表来决定如何显示,但是我们在样式表中未必会将所有的元素都进行了具体的描述,当然也没有必要那么做,所以对于那些没有描述的属性,浏览器将采用内置默认的方式来进行显示,譬如文字,如果你没有在css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,div或者其他元素的背景,如果在 css中没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。
11.为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px这里为了照顾不认识min-height的IE6 可以这样定义:
12.FireFox下如何使连续长字段自动换行众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决 <style type="text/css"><!-- div { width:100px
word-wrap:break-word border:1px solid red} --></style><div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<scrīpt type="text/javascrīpt">/* <![CDATA[ */
function toBreakWord(el, intLen){ var ōbj=document.getElementById(el) var strContent=obj.innerHTML var strTemp=""
while(strContent.length>intLen)
strTemp+=""+strContent obj.innerHTML=strTemp} if(document.getElementById&& !document.all)toBreakWord("ff", 37)/* ]]>*/ </scrīpt>
13.为什么IE6下容器的宽度和FF解释不同呢
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<style type="text/css"><!-- div --></style>
<div ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容</div>问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,
而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、 standards mode的相关
知识,请参考:http: // ASPNETusStan.mspx?mfr=true
IE6,IE7,FFIE7.0 出来了,对CSS的支持又有新问题。浏览器多了,网页兼容性更差了,疲于奔命的还是我们 ,为解决IE7.0的兼容问题,找来了下面这篇文章: 现在我大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!下面是三个浏览器的兼容性收集.
第一种,是CSS HACK的方法 height:20px/*For Firefox*/ *height:25px/*For IE7 &IE6*/ _height:20px/*For IE6*/ 注意顺序。 这样也属于CSS HACK,不过没有上面这样简洁。 #example /* Moz */ * html #example /* IE6 */ *+html #example /* IE7 */
<!--其他浏览器 --><link rel="stylesheet" type="text/css" href="css.css" /><!--[if IE 7]><!-- 适合于IE7 --><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]--><!--[if lte IE 6]><!-- 适合于IE6及一下 --><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
第三种,css filter的办法,以下为经典从国外网站翻译过来的。. 新建一个css样式如下: #item 新建一个div,并使用前面定义的css的样式: <div id="item">some text here</div> 在body表现这里加入lang属性,中文为zh:<body lang="en">现在对div元素再定义一个样式: *:lang(en) #item 这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式: #item:empty :empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。 对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用
另外,团IDC网上有许多产品团购,便宜有口碑