CSS对浏览器器的兼容性具有很高的价值

1、CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。常见兼容问题：1.DOOCTYYPE 影响 CSSS 处理理2.FFF: ddiv 设置 marrginn-leeft, maargiin-rrighht 为为 auuto 时已经经居中, IEE 不行行3.FFF: bbodyy 设置置 teext-aliign 时, divv 需要要设置 marrginn: aautoo(主要要是 mmarggin-lefft,mmarggin-rigght) 方可可居中4.FFF: 设设置 ppadddingg 后, diiv 会会增加 hei

2、ightt 和 widdth, 但 IE 不会, 故需需要用 !immporrtannt 多多设一个个 heeighht 和和 wiidthh5.FFF: 支支持 !impporttantt, IIE 则则忽略, 可用用 !iimpoortaant 为 FFF 特特别设置置样式6.diiv 的的垂直居居中问题题: vvertticaal-aaliggn:mmidddle; 将行行距增加加到和整整个DIIV一样样高 llinee-heeighht:2200ppx; 然后插插入文字字，就垂垂直居中中了缺点点是要控控制内容容不要换换行7.cuursoor: poiinteer 可可以同时时在 IIE

3、 FFF 中中显示游游标手指指状， hannd 仅仅 IEE 可以以8.FFF: 链链接加边边框和背背景色，需设置置 diispllay: bllockk, 同同时设置置 flloatt: lleftt 保证证不换行行。参照照 meenubbar, 给 a 和和 meenubbar 设置高高度是为为了避免免底边显显示错位位, 若若不设 heiightt, 可可以在 mennubaar 中中插入一一个空格格。9.在mmoziillaa fiireffox和和IE中中的BOOX模型型解释不不一致导导致相差差2pxx解决方方法：divmarrginn:300px!impporttantt;maarg

4、iin:228pxx;注意这两两个maargiin的顺顺序一定定不能写写反，据据阿捷的的说法!impporttantt这个属属性IEE不能识识别，但但别的浏浏览器可可以识别别。所以以在IEE下其实实解释成成这样：divmarringg:300px;marrginn:288px重复定义义的话按按照最后后一个来来执行，所以不不可以只只写maargiin:XXXpxx!immporrtannt;10.IIE5 和IEE6的BBOX解解释不一一致IE5下下divwiddth:3000px;marrginn:0 10ppx 00 100px;div的的宽度会会被解释释为3000pxx-100px(右填充

5、充)-110pxx(左填填充)最最终diiv的宽宽度为2280ppx，而而在IEE6和其其他浏览览器上宽宽度则是是以3000pxx+100px(右填充充)+110pxx(左填填充)=3200px来来计算的的。这时时我们可可以做如如下修改改divwiddth:3000px!impporttantt;wiidthh :3340ppx;mmarggin:0 110pxx 0 10ppx关于这个个是什么么我也不不太明白白，只知知道IEE5和ffireefoxx都支持持但IEE6不支支持，如如果有人人理解的的话，请请告诉我我一声，谢了！：）11.uul标签签在Moozillla中中默认是是有paaddi

6、ing值值的,而而在IEE中只有有marrginn有值所所以先定定义ulmmarggin:0;ppadddingg:0;就能解决决大部分分问题注意事项项：1、flloatt的diiv一定定要闭合合。例如：(其中ffloaatA、flooatBB的属性性已经设设置为ffloaat:lleftt;)这里的NNOTffloaatC并并不希望望继续平平移，而而是希望望往下排排。这段代码码在IEE中毫无无问题，问题出出在FFF。原因因是NOOTflloattC并非非flooat标标签，必必须将ffloaat标签签闭合。在之间加上上这个diiv一定定要注意意声明位位置，一一定要放放在最恰恰当的地地方，而而

7、且必须须与两个个具有ffloaat属性性的diiv同级级，之间间不能存存在嵌套套关系，否则会会产生异异常。并且将ccleaar这种种样式定定义为为为如下即即可：.cleearcleaar:bbothh;此外，为为了让高高度能自自动适应应，要在在wraappeer里面面加上ooverrfloow:hhiddden;当包含ffloaat的bbox的的时候，高度自自动适应应在IEE下无效效，这时时候应该该触发IIE的llayoout私私有属性性(万恶恶的IEE啊！)用zooom:1;可可以做到到，这样样就达到到了兼容容。例如某一一个wrrappper如如下定义义：.collwraappeerover

8、rfloow:hhiddden;zoomm:1;marggin:5pxx auuto;2、maargiin加倍倍的问题题。设置为ffloaat的ddiv在在ie下下设置的的marrginn会加倍倍。这是是一个iie6都都存在的的bugg。解决方案案是在这这个diiv里面面加上ddispplayy:innlinne;例如：相应的ccss为为#IammFlooatfloaat:lleftt;marggin:5pxx;dispplayy:innlinne;3、关于于容器的的包涵关关系很多时候候，尤其其是容器器内有平平行布局局，例如如两、三三个flloatt的diiv时，宽度很很容易出出现问题题。在I

9、IE中，外层的的宽度会会被内层层更宽的的divv挤破。一定要要用Phhotooshoop或者者Firrewoork量量取像素素级的精精度。4、关于于高度的的问题如果是动动态地添添加内容容，高度度最好不不要定义义。浏览览器可以以自动伸伸缩，然然而如果果是静态态的内容容，高度度最好定定好。（似乎有有时候不不会自动动往下撑撑开，不不知道具具体怎么么回事）5、最狠狠的手段段 - !immporrtannt;如果实在在没有办办法解决决一些细细节问题题,可以以用这个个方法.FF对对于”!immporrtannt”会自动动优先解解析,然然而IEE则会忽忽略.如如下.tabbd1backkgrooundd:u

10、rrl(/ress/immagees/uup/ttab11.giif) no-reppeatt 0ppx 00px !immporrtannt;backkgrooundd:urrl(/ress/immagees/uup/ttab11.giif) no-reppeatt 1ppx 00px; 值得注意意的是，一定要要将xxxxx !immporrtannt 这这句放置置在另一一句之上上，上面面已经提提过20008年99月166日新增增屏蔽蔽IE浏浏览器（也就是是IE下下不显示示）*:laang(zh) seelecct fonnt:112pxx !iimpoortaant;seleect:emp

11、pty foont:12ppx !impporttantt;这里seelecct是选选择符，根据情情况更换换。第二二句是MMAC上上saffarii浏览器器独有的的。仅IE77与IEE5.00可以识识别*+httml sellectt 当面临需需要只针针对IEE7与IIE5.0做样样式的时时候就可可以采用用这个HHACKK。仅IE77可以识识别*+httml sellectt !immporrtannt;当面临需需要只针针对IEE7做样样式的时时候就可可以采用用这个HHACKK。IE6及及IE66以下识识别* httml sellectt 这个地方方要特别别注意很很多博客客都写成成了是IIE6

12、的的HACCK其实实IE55.x同同样可以以识别这这个HAACK。其它浏浏览器不不识别。htmll bbodyy seelecct 这句与上上一句的的作用相相同。仅IE66不识别别，屏蔽蔽IE66seleect ddispplayy :nnonee;这里主要要是通过过CSSS注释分分开一个个属性与与值，注注释在冒冒号前。仅IE66与IEE5不识识别，屏屏蔽IEE6与IIE5seleect ddispplayy :nnonee;这里与上上面一句句不同的的是在选选择符与与花括号号之间多多了一个个CSSS注释。不屏蔽蔽IE55.5仅IE55不识别别，屏蔽蔽IE55seleect 这一句是是在上一一句

13、中去去掉了属属性区的的注释。只有IIE5不不识别，IE55.5可可以识别别。盒模型解解决方法法selcct widdth:IE55.x宽宽度; voiice-fammilyy :”; voiice-fammilyy:innherrit; wiidthh:正确确宽度;盒模型的的清除方方法不是是通过!impporttantt来处理理的。这这点要明明确。清除浮动动seleect:aftter coonteent:”.”; ddispplayy:bllockk; hheigght:0; cleear:botth; vissibiilitty:hhiddden;在Firrefoox中，当子级级都为浮浮动

14、时，那么父父级的高高度就无无法完全全的包住住整个子子级，那那么这时时用这个个清除浮浮动的HHACKK来对父父级做一一次定义义，那么么就可以以解决这这个问题题。截字省略略号seleect -o-ttextt-ovverffloww:elllippsiss; ttextt-ovverffloww:elllippsiss; wwhitte-sspacce:nnowrrap; ovverffloww:hiiddeen; 这个是在在越出长长度后会会自行的的截掉多多出部分分的文字字，并以以省略号号结尾，很好的的一个技技术。只只是目前前Firrefoox并不不支持。只有Opperaa识别meddia all

15、l annd (minn-wiidthh: 00px) sseleect 针对Opperaa浏览器器做单独独的设定定。以上都是是写CSSS中的的一些HHACKK，这些些都是用用来解决决局部的的兼容性性问题，如果希希望把兼兼容性的的内容也也分离出出来，不不妨试一一下下面面的几种种过滤器器。这些些过滤器器有的是是写在CCSS中中通过过过滤器导导入特别别的样式式，也有有的是写写在HTTML中中的通过过条件来来链接或或是导入入需要的的补丁样样式。IE5.x的过过滤器，只有IIE5.x可见见meddia ttyy icoonteent:”; iimpoort iee5wiin.ccss;IE5/MACC

16、的过滤滤器，一一般用不不着IE的iif条件件HacckOnlyy IEE 所有的IIE可识识别CSS HACCK（iie6-ie77-foox 兼兼容）DIV+CSSS 20009-009-227 009:113 阅读读39 评评论0 字字号： 大大 中中中 小小小 区区别IEE6与FFF： bacckgrrounnd:oorannge;*baackggrouund:bluue;区别IEE6与IIE7： bbackkgrooundd:grreenn !iimpoortaant;bacckgrrounnd:bbluee;区别IEE7与FFF： bacckgrrounnd:oorannge; *b

17、backkgrooundd:grreenn;区别FFF，IEE7，IIE6： bacckgrrounnd:oorannge;*baackggrouund:greeen !immporrtannt;*bacckgrrounnd:bbluee;注：IEE都能识识别*;标准浏浏览器(如FFF)不能能识别*；IE6能能识别*，但不不能识别别 !iimpoortaant,IE7能能识别*，也能能识别!impporttantt;FF不能能识别*，但能能识别!impporttantt; IEE6 IIE7 FF * !impporttantt 另外再补补充一个个，下划划线”_“, IE6支支持下划划线，II

18、E7和和firrefoox均不不支持下下划线。(推荐荐) 于是大家家还可以以这样来来区分IIE6，IE77，FFF: baackggrouund:oraangee;*bbackkgrooundd:grreenn;_bbackkgrooundd:bllue;注：不管管是什么么方法，书写的的顺序都都是fiireffox的的写在前前面，IIE7的的写在中中间，IIE6的的写在最最后面。一、CSSS HHACKK以下两种种方法几几乎能解解决现今今所有HHACKK.1, !impporttantt随着IEE7对!impporttantt的支持持, !impporttantt 方法法现在只只针对IIE6的

19、的HACCK.(注意写写法.记记得该声声明位置置需要提提前.)styyleggt;#wraappeerwidtth: 1000px!impporttantt; /* IIE7+FF */widtth: 80ppx; /* IE66 */sttyleegt;2, IIE6/IE777对FFireeFoxx*+httml 与 *htmml 是是IE特特有的标标签, firrefoox 暂暂不支持持.而*+httml 又为 IE77特有标标签.#wraappeer#wraappeer wiidthh: 1120ppx; /* FFireeFoxx */*htmml #wraappeer wiidth

20、h: 880pxx; /* ie66 fiixedd */*+httml #wrrappper wwidtth: 60ppx; /* iee7 ffixeed, 注意顺顺序 */注意:*+httml 对IEE7的HHACKK 必须须保证HHTMLL顶部有有如下声声明：二、万能能 flloatt 闭合合(非常常重要!)关于 ccleaar ffloaat 的的原理可可参见 Hoow TTo CCleaar FFloaats Witthouut SStruuctuurall Maarkuup将以下代代码加入入Glooball CSSS 中中,给需需要闭合合的diiv加上上 /* CCleaar F

21、Fix */.cleearffix:aftterconttentt:.;dispplayy:bllockk;heigght:0;cleaar:bbothh;visiibillityy:hiiddeen;.cleearffixdispplayy:innlinne-bblocck;/* HHidee frrom IE Macc */.cleearffix diispllay:bloock;/* EEnd hidde ffromm IEE Maac */* eend of cleearffix */关于闭合合浮动元元素（ccleaarinng ffloaat）的的方法现现在已经经很多了了，个人人认为

22、简简单实用用的方法法就是使使用:aafteer伪类类动态的的嵌入一一个用于于清除浮浮动的元元素，可可惜代码码量太大大了，看看上去不不够简洁洁。现在看到到有个方方法超级级简单。介绍一一下这个个方法。原文在在：htttp:/aanneevannkessterren.nl/20005/003/ccleaarinng-ffloaats这 一方方面的原原理是，外围元元素之所所以不能能很好的的延伸，问题出出在了ooverrfloow上，因为ooverrfloow不可可见（见见W3CC的解释释）。现现在只要要将给外外围元素素添 加加一个“oveerfllow:autto”，就可可以解决决问题，结果是是除了I

23、IE，真真的可以以解决。下来就就要解决决ID的的问题了了，再加加上“_heeighht:11%”，这 个问题题就完全全解决了了。下面的例例子作为为比较1、没有有闭合浮浮动元素素；2、非IEE下闭合合浮动元元素；33、完全全闭合元元素。相相关代码码如下：XHTMML代码码：Exammplee Soourcce CCodee wwww.522csss.coom Flooat lefft Flooat rigght CSS样样式：Exammplee Soourcce CCodee wwww.522csss.coom#wraap borrderr:6ppx #cccc soolidd; ooverrf

24、loow:aautoo; _heiightt:1%; .collumnn_leeft flloatt:leeft; wiidthh:200%; padddinng:110pxx; .collumnn_riightt ffloaat:rrighht; widdth:75%; ppadddingg:100px; boordeer-lleftt:6ppx #eeee soolidd;三、其他他兼容技技巧(再再次啰嗦嗦)1, FFF下给给 diiv 设设置 ppadddingg 后会会导致 widdth 和 hheigght 增加, 但IIE不会会.(可可用!iimpoortaant解解决)2, 居居

25、中问题题.1).垂垂直居中中.将 linne-hheigght 设置为为 当前前 diiv 相相同的高高度, 再通过过 veertiicall-allignn: mmidddle.( 注注意内容容不要换换行.)2).水水平居中中. mmarggin: 0 autto;(当然不不是万能能)3, 若若需给 a 标标签内内内容加上上 样式式, 需需要设置置 diispllay: bllockk;(常常见于导导航标签签)4, FFF 和和 IEE 对 BOXX 理解解的差异异导致相相差 22px 的还有有设为 flooat的的divv在iee下 mmarggin加加倍等问问题.5, uul 标标签在

26、FF 下面默默认有 lisst-sstylle 和和 paaddiing . 最最好事先先声明, 以避避免不必必要的麻麻烦. (常见见于导航航标签和和内容列列表)6, 作作为外部部 wrrappper 的 ddiv 不要定定死高度度, 最最好还加加上 ooverrfloow: hidddenn.以达达到高度度自适应应.7, 关关于手形形光标. cuursoor: poiinteer. 而haand 只适用用于 IIE.1 针对对firrefoox iie6 ie77的csss样式式现在大部部分都是是用!iimpoortaant来来hacck，对对于iee6和ffireefoxx测试可可以正常常

27、显示，但是iee7对!impporttantt可以正正确解释释，会导导致页面面没按要要求显示示！找到到一个针针对IE77不错的的hacck方式式就是使使用“*+hhtmll”，现在在用IEE7浏览览一下，应该没没有问题题了。现在写一一个CSSS可以以这样：#1 coolorr: #3333; /* Mooz */* httml #1 ccoloor: #6666; /* IIE6 */*+httml #1 ccoloor: #9999; /* IIE7 */那么在ffireefoxx下字体体颜色显显示为#3333，IEE6下字字体颜色色显示为为#6666，IIE7下下字体颜颜色显示示为#999

28、9。2 csss布局局中的居居中问题题主要的样样式定义义如下：bodyy TTEXTT-ALLIGNN: ccentter;#cennterr MARRGINN-RIIGHTT: aautoo; MMARGGIN-LEFFT: autto; 说明：首先在父父级元素素定义TTEXTT-ALLIGNN: ccentter;这个的的意思就就是在父父级元素素内的内内容居中中；对于于IE这这样设定定就已经经可以了了。但在moozillla中中不能居居中。解解决办法法就是在在子元素素定义时时候设定定时再加加上“MARRGINN-RIIGHTT: aautoo;MAARGIIN-LLEFTT: aautoo

29、; ”需要说明明的是，如果你你想用这这个方法法使整个个页面要要居中，建议不不要套在在一个DDIV里里，你可可以依次次拆出多多个diiv，只要在每每个拆出出的diiv里定定义MAARGIIN-RRIGHHT: autto;MMARGGIN-LEFFT: autto; 就可以以了。3 盒模模型不同同解释.#boxx wwidtth:6600ppx; /ffor ie66.0- widtth:5500ppx; /ffor ff+ie66.0#boxx wwidtth:6600ppx!iimpoortaant /ffor ff widdth:6000px; /forr fff+iee6.00 wiid

30、thh /*/:5000px; /forr iee6.00-4 浮动动ie产产生的双双倍距离离#boxx ffloaat:lleftt; wwidtth:1100ppx; marrginn:0 0 00 1000pxx; /这种种情况之之下IEE会产生生2000px的的距离 dissplaay:iinliine; /使浮动动忽略这里细说说一下bblocck,iinliine两两个元素素,Bllockk元素的的特点是是:总是是在新行行上开始始,高度度,宽度度,行高高,边距距都可以以控制(块元素素);IInliine元元素的特特点是:和其他他元素在在同一行行上,不不可控制制(内嵌嵌元素);#box

31、x ddispplayy:bllockk; /可以以为内嵌嵌元素模模拟为块块元素 dissplaay:iinliine; /实现同同一行排排列的的的效果 dipplayy:taablee;5 IEE与宽度度和高度度的问题题IE不认认得miin-这这个定义义，但实实际上它它把正常常的wiidthh和heeighht当作作有miin的情情况来使使。这样样问题就就大了，如果只只用宽度度和高度度，正常的浏浏览器里里这两个个值就不不会变，如果只只用miin-wwidtth和mmin-heiightt的话，IE下下面根本本等于没没有设置置宽度和和高度。比如要设设置背景景图片，这个宽宽度是比比较重要要的。要

32、要解决这这个问题题，可以以这样：#boxx wwidtth: 80ppx; heiightt: 335pxx;hhtmllboody #boox widdth: auuto; heeighht: autto; minn-wiidthh: 880pxx; mmin-heiightt: 335pxx;6 页面面的最小小宽度min-widdth是是个非常常方便的的CSSS命令，它可以以指定元元素最小小也不能能小于某某个宽度度，这样样就能保保证排版版一直正正确。但但IE不不认得这这个，而它实际际上把wwidtth当做做最小宽宽度来使使。为了了让这一一命令在在IE上上也能用用，可以以把一个个 放到 标签

33、签下，然然后为ddiv指指定一个个类：然后CSSS这样样设计：#conntaiinerr mmin-widdth: 6000pxx; wwidtth:eexprresssionn(doocummentt.boody.cliienttWiddth 6600? 6600ppx: aautoo );第一个mmin-widdth是是正常的的；但第第2行的的widdth使使用了JJavaascrriptt，这只只有IEE才认得得，这也也会让你你的HTTML文文档不太太正规。它实际际上通过过Javvasccrippt的判判断来实实现最小小宽度。7 清除除浮动.hacckboox dissplaay:tta

34、blle; /将将对象作作为块元元素级的的表格显显示或或者.hhackkboxx ccleaar:bbothh;或者加入入:affterr（伪对对象）,设置在在对象后后发生的的内容，通常和和conntennt配合合使用，IE不不支持此此伪对象象，非IIe 浏浏览器支支持，所以并不不影响到到IE/WINN浏览器器。这种种的最麻麻烦的#boxx:affterr cconttentt: .; diispllay: bllockk; hheigght: 0; cllearr: bbothh; vvisiibillityy: hhiddden;8 DIIV浮动动IE文文本产生生3象素素的buug左边对象

35、象浮动，右边采采用外补补丁的左左边距来来定位，右边对对象内的的文本会会离左边边有3ppx的间间距.#boxx ffloaat:lleftt; wwidtth:8800ppx;#leeft flloatt:leeft; wiidthh:500%;#riightt wwidtth:550%;*hhtmll #lleftt mmarggin-rigght:-3ppx; /这这句是关关键HTMLL代码 9 属性性选择器器(这个个不能算算是兼容容,是隐隐藏csss的一一个buug)pidddivvidd这个对于于IE66.0和和IE66.0以以下的版版本都隐隐藏,FFF和OOPerra作用用属性选择择器

36、和子子选择器器还是有有区别的的,子选选择器的的范围从从形式来来说缩小小了,属属性选择择器的范范围比较较大,如如piid中中,所有有p标签签中有iid的都都是同样样式的.10 IIE捉迷迷藏的问问题当divv应用复复杂的时时候每个个栏中又又有一些些链接，DIVV等这个个时候容容易发生生捉迷藏藏的问题题。有些内容容显示不不出来，当鼠标标选择这这个区域域是发现现内容确确实在页页面。解决办法法：对#layyoutt使用llinee-heeighht属性性 或者者给#llayoout使使用固定定高和宽宽。页面面结构尽尽量简单单。11 高高度不适适应高度不适适应是当当内层对对象的高高度发生生变化时时外层高

37、高度不能能自动进进行调节节，特别别是当内内层对象象使用marggin 或paaddiign 时。例：p对象中中的内容容 CSS：#boox bacckgrrounnd-ccoloor:#eeee; #boxx p maargiin-ttop: 200px;marrginn-boottoom: 20ppx; texxt-aaliggn:ccentter; 解决方法法：在PP对象上上下各加加2个空空的diiv对象象CSSS代码：.1heiightt:0ppx;ooverrfloow:hhiddden;或者者为DIIV加上上borrderr属性。 12 ffloaat的ddiv闭闭合;清清除浮动动;

38、自适适应高度度; 例如如：这这里的NNOTffloaatC并并不希望望继续平平移，而而是希望望往下排排。(其其中flloattA、ffloaatB的的属性已已经设置置为 ffloaat:lleftt;) 这段代码码在IEE中毫无无问题，问题出出在FFF。原因因是NOOTflloattC并非非flooat标标签，必必须将ffloaat标签签 闭合合。在 之间间加上 这个个divv一定要要注意位位置，而而且必须须与两个个具有ffloaat属性性的diiv同级级，之间间不能存存在嵌套套关系，否则会会 产生生异常。 并且且将cllearr这种样样式定义义为为如如下即可可： .cleear cllear

39、r:booth; 作为外外部 wwrappperr 的 divv 不要要定死高高度,为为了让高高度能自自动适应应，要在在wraappeer里面面加上ooverrfloow:hhiddden; 当包包含flloatt的 bbox的的时候，高度自自动适应应在IEE下无效效，这时时候应该该触发IIE的llayoout私私有属性性(万恶恶的IEE啊！)用zooom:1;可可以做到到，这样样就达到到了兼容容。 例如某一一个wrrappper如如下定义义： .collwraappeer oveerfllow:hidddenn; zzoomm:1; maargiin:55px autto; 对于排排版,我我

40、们用得得最多的的csss描述可可能就是是flooat:lefft.有有的时候候我们需需要在nn栏的ffloaat ddiv后后面做一一个统一一的背景景,譬如如: 比 如我我们要将将pagge的背背景设置置成蓝色色,以达达到所有有三栏的的背景颜颜色是蓝蓝色的目目的,但但是我们们会发现现随着lleftt ceenteer rrighht的向向下拉长长,而 pagge居然然保存高高度不变变,问题题来了,原因在在于paage不不是flloatt属性,而我们们的paage由由于要居居中,不不能设置置成flloatt,所以以我们应应该这样样解决 再嵌入一一个flloatt leeft而而宽度是是1000%

41、的DDIV解解决之 万能ffloaat 闭闭合(非非常重要要!) 关 于 cleear flooat 的原理理可参见见 HHow To Cleear Flooatss Wiithoout Strructturaal MMarkkup,将以以下 代代码加入入Glooball CSSS 中中,给需需要闭合合的diiv加上上 cllasss=ccleaarfiix 即可,屡试不不爽. /* CCleaar FFix */ .cleearffix:aftter cconttentt:.; dissplaay:bblocck; heiightt:0; cllearr:booth; viisibbilii

42、ty:hidddenn; .cleearffix ddispplayy:innlinne-bblocck; /* HHidee frrom IE Macc */ .cleearffix diispllay:bloock; /* EEnd hidde ffromm IEE Maac */ /* eend of cleearffix */ 或者这样样设置：.haackbbox diispllay:tabble; /将对象象作为块块元素级级的表格格显示 13 如如何对齐齐文本与与文本输输入框加上 vvertticaal-aaliggn:mmidddle; 14 IIE6下下为什么么图片下下有空隙隙产

43、生解决这个个BUGG的方法法也有很很多,可可以是改改变httml的的排版,或者设设置immg 为为dissplaay:bblocck 或或者设置置verrticcal-aliign 属性为为 veertiicall-allignn:toop | boottoom |midddlee |ttextt-boottoom 都都可以解解决. 15 怎怎么样才才能让层层显示在在FLAASH之之上解决的办办法是给给FLAASH设设置透明明 16 怎怎样使一一个层垂垂直居中中于浏览览器中 这里我们们使用百百分比绝绝对定位位,与外外补丁负负值的方方法,负负值的大大小为其其自身宽宽度高度度除以二二 第一篇 DI

44、VV CSSS设计计时IEE6、IIE7、FF 与兼容容性有关关的特性性4 |1 qq) xx6 zz7 ff! |# ee a在网站站设计的的时候，应该注注意csss样式式兼容不不同浏览览器问题题，特别别是对完完全使用用DIVV CSSS设计计的网站站，就应应该更注注意IEE6 IIE7 FF对对CSSS样式的的兼容，不然，你的网网页可能能出现意意料之外外的效果果！ R) b5 f: S+ G7 s6 C6 ( k0 z% P例子子：* R! x) y88 r. R/ ?+ n44 R# ) n77 所有浏览览器 通通用 hheigght: 1000pxx; IE6 专用 _heeighht

45、: 1000px; 2 w+ W5 N4 g# JIE6 专用 *heeighht: 1000px;IE7 专用 *+hheigght: 1000pxx;IE7、FF 共用 heiightt: 1100ppx !impporttantt;6 s C. R, V J# K. E77 h一一、CSSS 兼兼容以下两两种方法法几乎能能解决现现今所有有兼容. 1, !immporrtannt (不是很很推荐，用下面面的一种种感觉最最安全) 随着IIE7对对!immporrtannt的支支持, !immporrtannt 方方法现在在只针对对IE66的兼容容.(注注意写法法.记得得该声明明位置需需要提前

46、前) #wrrappper wwidtth: 1000px!impporttantt; /* IIE7+FF */ widdth: 800px; /* IEE6 */ 2, IEE6/IIE777对FiireFFox 3 r8 n# j0 R% e0 n 0 - U7 g3 y+ p*+hhtmll 与 *httml 是IEE特有的的标签, fiireffox 暂不支支持.而而*+hhtmll 又为为 IEE7特有有标签. #wraappeer wiidthh: 1120ppx; /* FFireeFoxx */ *hhtmll #wwrappperr widdth: 800px; /* ii

47、e6 fixxed */ *+hhtmll #wwrappperr widdth: 600px; /* iie7 fixxed, 注意意顺序 */ 注意：*+httml 对IEE7的兼兼容 必必须保证证HTMML顶部部有如下下声明： 二、万能能 flloatt 闭合合(非常常重要) $ z3 B) l2 l$ - B可以用用这个解解决多个个divv对齐时时的间距距不对，将以下下代码加加入Gllobaal CCSS 中,给给需要闭闭合的ddiv加加上 cclasss=”cleearffix” 即可可,屡试试不爽. /* CCleaar FFix */ .cllearrfixx:affterr c

48、onntennt:.; diispllay:bloock; heeighht:00; ccleaar:bbothh; vvisiibillityy:hiiddeen; .ccleaarfiix diispllay:inllinee-bllockk; /* Hiide froom IIE MMac */ .ccleaarfiix dissplaay:bblocck; /* Ennd hhidee frrom IE Macc */ /* ennd oof ccleaarfiix */ 三、其他他兼容技技巧(相当有有用) s3 I; f9 T( b4 1, FF下下给 ddiv 设置 padddin

49、ng 后后会导致致 wiidthh 和 heiightt 增加加, 但但IE不不会.(可用!impporttantt解决) ; x+ T0 t; f/ e1 5 D3 D0 v: i3 k7 r2 e2, 居中问问题. - PP4 hh+ UU5 jj$ cc 5 v& 9 k) v* U: M1).垂直直居中.将 llinee-heeighht 设设置为 当前 divv 相同同的高度度, 再再通过 vetticaal-aaliggn: midddlee.( 注意内内容不要要换行.) ; C55 t# N NN1 JJ: . SS( xx2 zz6 ll, yy2).水平居居中. marrgi

50、nn: 00 auuto;(当然然不是万万能) 33, 若若需给 a 标标签内内内容加上上 样式式, 需需要设置置 diispllay: bllockk;(常常见于导导航标签签) 66 s/ y22 m22 Q% c, n66 M: * 11 p4, FFF 和 IE 对 BBOX 理解的的差异导导致相差差 2ppx 的的还有设设为 ffloaat的ddiv在在ie下下 maargiin加倍倍等问题题. 55 p; t# E44 q F5, ull 标签签在 FFF 下下面默认认有 llistt-sttylee 和 padddinng . 最好好事先声声明, 以避免免不必要要的麻烦烦. (常见

51、于于导航标标签和内内容列表表) 6, 作为为外部 wraappeer 的的 diiv 不不要定死死高度, 最好好还加上上 ovverffloww: hhiddden.以达到到高度自自适应. ) d2 k4 k4 W9 O F7, 关于手手形光标标. ccurssor: poointter. 而hhandd 只适适用于 IE.% II+ ( 7 mm EE6 dd第二篇篇 针对对firrefoox iie6 ie77的csss样式式* ( II! PP( ll- UU) ; QQ; 什什么是浏浏览器兼兼容：当当我们使使用不同同的浏览览器（FFireefoxx IEE7 IIE6）访问同同一个网网

52、站，或或者页面面的时候候，会出出现一些些不兼容容的问题题，有的的显示出出来正常常，有的的显示出出来不正正常，我我们在编编写CSSS的时时候会很很恼火，刚修复复了这个个浏览器器的问题题，结果果另外一一个浏览览器却出出了新问问题。而而兼容就就是一种种办法，能让你你在一个个CSSS里面独独立的写写支持不不同浏览览器的样样式。这这下就和和谐了。呵呵！ 2 h0 t E22 66 ?88 H) R% h微软软发布的的IE77浏览器器的兼容容性确实实给一些些网页制制作人员员添加了了一个沉沉重的负负担，虽虽然IEE7已经经走向标标准化，但还是是有许多多和FFF不同的的地方，所以需需要用到到IE77的兼容容，

53、有许许多朋友友问过IIE7的的兼容是是什么，其实我我也不知知道。暂暂时还没没找到IIE7专专用的兼兼容。除除了前面面那片文文章，针对ffireefoxx iee6 iie7的的csss样式中的兼兼容方式式也是很很好用的的。 有一一点逻辑辑思想的的人都会会知道可可以用IIE和FFF的兼兼容结合合起来使使用，下下面介绍绍三个兼兼容，例例如：（适合新新手，呵呵呵，高高手就在在这里路路过吧。） 第一个兼兼容，IIE FFF 所所有浏览览器 公公用（其其实也不不算是兼兼容） heigght:1000px; 第二个兼兼容 IIE6专专用 _heiightt:1000pxx; 第三个兼兼容 IIE6 IE7

54、7公用 *heiightt:1000pxx; 介绍绍完了这这三个兼兼容了，下面我我们再来来看看如如何在一一个样式式里分别别给一个个属性定定义IEE6 IIE7 FF专专用的兼兼容，看看下面的的代码，顺序不不能错哦哦： heigght:1000px; *heiightt:1220pxx; _heiightt:1550pxx; 下面面我简单单解释一一下各浏浏览器怎怎样理解解这三个个属性： 在FFF下，第第2、33个属性性FF不不认识，所以它它读的是是 heeighht:1100ppx; ! zz( DD5 mm. EE1 pp: xx在在IE77下，第第三个属属性IEE7不认认识，所所以它读读第1

55、、2个属属性，又又因为第第二个属属性覆盖盖了第一一个属性性，所以以IE77最终读读出的是是第2个个属性 *heeighht:1120ppx; 在在IE66下，三三个属性性IE66都认识识，所以以三个属属性都可可以读取取，又因因为第三三个属性性覆盖掉掉前2个个属性，所以IIE6最最终读取取的是第第三个属属性。( l99 U- / m11 00 d. t& F& r11 针对对firrefoox iie6 ie77的csss样式式( II EE nn. II+ HH& mm: KK( rr现现在大部部分都是是用!iimpoortaant来来兼容，对于iie6和和firrefoox测试试可以正正常显

56、示示，但是是ie77对!iimpoortaant可可以正确确解释，会导致致页面没没按要求求显示！找到一一个针对对IE77不错的的兼容方方式就是是使用“*+hhtmll”，现现在用IIE7浏浏览一下下，应该该没有问问题了现现在写一一个CSSS可以以这样： #1 coolorr: #3333; /* Mooz */ * httml #1 ccoloor: #6666; /* IIE6 */ *+httml #1 ccoloor: #9999; /* IIE*/ 那么在ffireefoxx下字体体颜色显显示为#3333IE66下字体体颜色显显示为#6666，IEE7下字字体颜色色显示为为#9999。

57、 , vv. FF, nn% + OO3 _- KK: & V$ H2 csss布局中中的居中中问题主主要的样样式定义义如下： bodyy TTEXTT-ALLIGNN: ccentter; #cennterr MARRGINN-RIIGHTT: aautoo; MMARGGIN-LEFFT: autto; 说明： 3 qq$ ! zz/ UU u. w1 i3 h D# G- G: e88 V 00 c首先先在父级级元素定定义TEEXT-ALIIGN: ceenteer;这这个的意意思就是是在父级级元素内内的内容容居中；对于IIE这样样设定就就已经可可以了。 ) y9 n3 B* i! H5

58、 R* b但在mmoziillaa中不能能居中。解决办办法就是是在子元元素定义义时候设设定时再再加上：“MAARGIIN-RRIGHHT: autto;MMARGGIN-LEFFT: autto; ” ) a# s; s( W, t( AA/ VV5 ll3 yy需需要说明明的是，如果你你想用这这个方法法使整个个页面要要居中，建议不不要套在在一个DDIV里里，你可可以依次次拆出多多个diiv，只只要在每每个拆出出的diiv里定定义MAARGIIN-RRIGHHT: autto;MMARGGIN-LEFFT: autto; 就可以以了。 & WW MM2 CC9 CC) dd8 7 oo8 3

59、SS HH5 FF# dd+ kk9 DD. oo3 盒盒模型不不同解释释#boox widdth:6000px; /forr iee6.00- wwidtth:5500ppx; /ffor ff+ie66.0 #bbox wiidthh:6000pxx!immporrtannt /foor fff wwidtth:6600ppx; /ffor ff+ie66.0 widdth /*/:5500ppx;/foor iie6.0- 4 浮动动ie产产生的双双倍距离离#boxx ffloaat:lleftt; wwidtth:1100ppx; marrginn:0 0 00 1000pxx; /这

60、种种情况之之下IEE会产生生2000px的的距离 dispplayy:innlinne; /使使浮动忽忽略 这里里细说一一下bllockk,innlinne两个个元素,Bloock元元素的特特点是:总是在在新行上上开始,高度,宽度,行高,边距都都可以控控制(块块元素);Innlinne元素素的特点点是:和和其他元元素在同同一行上上,不不可控制制(内嵌嵌元素); #boxx ddispplayy:bllockk; /可以以为内嵌嵌元素模模拟为块块元素 dispplayy:innlinne; /实实现同一一行排列列的的效效果 iplaay:ttablle; 5 IEE与宽度度和高度度的问题题9 l