CSS对浏览器器的📎兼容性具有很🏴高的价值，通常情🌉况下【kuàng xià】IE和【hé】🐍Firefox存在很【cún zài hěn】大的解析差异，这里介绍一下【shào yī xià】兼容要【jiān róng yào】点⛄。

常见兼容问题：

1、DOCTYPE 影响 CSS 处理

2、FF：div 设置🚜 margin-left， margin-right 为 auto 时已经【shí yǐ jīng】居中🃏，IE 不行【bú háng】

3、FF: body 设置🎄 text-align 时【shí】🦒， div 需要设【xū yào shè】置🎄 margin: auto(主要是 margin-left，margin-right) 方可居【fāng kě jū】中🗄

4、FF: 设置 padding 后【hòu】， div 会增加【huì zēng jiā】🔗 height 和🥞 width， 但 IE 不会🅿， 故需要【gù xū yào】用🕠 !important 多设一个【gè】 height 和🥞 width

5、FF: 支持📤 !important， IE 则忽略🤫， 可用 !important 为【wéi】 FF 特别设【tè bié shè】置样式

6、div 的垂直居中问【jū zhōng wèn】题: vertical-align:middle; 将行距🐫增加到【zēng jiā dào】🎂和整个🛁DIV一样高 line-height:200px; 然后插入文字，就垂直居中了【jū zhōng le】。缺点是要控制【yào kòng zhì】内容不🎽要换行【yào huàn háng】♋

7、cursor: pointer 可以同🍳时在 IE FF 中显示【zhōng xiǎn shì】游标手指状【zhǐ zhuàng】， hand 仅【jǐn】🍑 IE 可以😊

8、FF: 链接加边框和背景色【bèi jǐng sè】，需设置【zhì】👿 display: block， 同时设置【zhì】 float: left 保证不【bǎo zhèng bú】🕉换行。参照【cān zhào】🏅 menubar， 给【gěi】➰ a 和 menubar 设置高【shè zhì gāo】度是为了避免底边显🥕示错位【shì cuò wèi】， 若不设 height， 可以在 menubar 中插入🥅一个空👺格。

9、在✂mozilla firefox和🏩IE中的【zhōng de】BOX模型解🔹释不一致导致【zhì dǎo zhì】相差2px解决方法【fǎ】：

divmargin

注意这两个🕤margin的顺序【de shùn xù】一定不能写反💩，据阿捷【jù ā jié】的说法🐢!important这个属性IE不能识🚁别【bié】🛁，但别【dàn bié】🛁的浏览器可以识别【bié】🛁。所以在【suǒ yǐ zài】🔔IE下其实解释成这样【zhè yàng】：

divmaring

重复定义的话按照最【àn zhào zuì】后一个来执行【lái zhí háng】👨，所以不💰可以只写【xiě】🐶margin:XXpx!important;

10、IE5 和IE6的【de】🥈BOX解释不一致【yī zhì】🐢

IE5下

divwidth

div的宽度【de kuān dù】🛹会被解【huì bèi jiě】🖇释为300px-10px(右填充【yòu tián chōng】🚬)-10px(左填充【zuǒ tián chōng】)最终🥞div的宽度【de kuān dù】🛹为280px，而在⛪IE6和其他浏览器【liú lǎn qì】上宽度则是以300px+10px(右填充【yòu tián chōng】🚬)+10px(左填充【zuǒ tián chōng】)=320px来计算的。这时我🍮们可以做如下【zuò rú xià】🧝修改

divwidth

关于这个💁/**/是什么【shì shí me】我也不🚭太明白🧞，只知道IE5和firefox都支持但【dàn】IE6不支持【bú zhī chí】。

11、ul标签在🤑Mozilla中默认是有padding值的【zhí de】🌍，而在【ér zài】🛒IE中只有margin有值所【yǒu zhí suǒ】以先定义

ulmargin

就能解决大部分问题

注意事项：

1、float的div一定要闭合。

例如【lì rú】：(其中🌸floatA、floatB的属性🤞已经设【yǐ jīng shè】置为float:left;)

<#div id="floatA" ></#div>

<#div id="floatB" ></#div>

<#div id="NOTfloatC" ></#div>

这里的【zhè lǐ de】NOTfloatC并不希望继续💆平移【píng yí】👋，而是希⏭望往下【wàng wǎng xià】排。

这段代码在🎸IE中毫无🔨问题【wèn tí】🔷，问题【wèn tí】🔷出在【chū zài】🎸FF。原因是NOTfloatC并非【bìng fēi】float标签，必须将float标签闭【biāo qiān bì】🐓合。

在

<#div class="floatB"></#div>

<#div class="NOTfloatC"></#div>

之间加上

<#div class="clear"></#div>

这个【zhè gè】div一定要【yī dìng yào】🎁注意声📘明位置，一定要【yī dìng yào】🎁放在最😗恰当的【qià dāng de】地方，而且必须与两个具有【gè jù yǒu】float属性的♈div同级，之间不【zhī jiān bú】🛒能存在【néng cún zài】🎓嵌套关系，否则会产生异常。

并且将【bìng qiě jiāng】💨clear这种样式定义【shì dìng yì】😽为为如下即可：

.clear{

clear:both;}

此外😽，为了让🖇高度能【gāo dù néng】自动适应🥈，要在wrapper里面加【lǐ miàn jiā】上【shàng】overflow:hidden;

当包含⛸float的box的时候🎷，高度自🕦动适应在【zài】IE下无效🐝，这时候🐉应该触【yīng gāi chù】发【fā】🚰IE的layout私有属性(万恶的【wàn è de】IE啊【ā】！)用【yòng】zoom:1;可以做到【dào】，这样就达到【dào】了兼容🙊。

例如某一个wrapper如下定义：

2、margin加倍的问题。

设置为float的【de】div在🦂ie下设置😉的【de】margin会加倍。这是一【zhè shì yī】个ie6都存在👕的【de】bug。

解决方案

是在这个【gè】♓div里面加【lǐ miàn jiā】上🔜display:inline;

例如：

<#div id="imfloat"></#div>

相应的css为

3、关于容器的包涵关系

很多时【hěn duō shí】🐉候💺，尤其是【yóu qí shì】容器内有平行布局😓，例如两【lì rú liǎng】、三个【sān gè】float的div时，宽度很🍯容易出【róng yì chū】现问题。在【zài】🍅IE中，外层的【wài céng de】宽度会📆被内层更宽的div挤破。一定要用⏸Photoshop或者👰Firework量取像素级的【sù jí de】精度。

4、关于高度的问题

如果是【rú guǒ shì】动态地添加内容🍎，高度最🧑好不要【hǎo bú yào】🔸定义【dìng yì】👅。浏览器可以自动伸缩🛄，然而如果是【rú guǒ shì】静🏾态的内容🍎，高度最🧑好定好。（似乎有时候不会自动【huì zì dòng】往下撑【wǎng xià chēng】开【kāi】🥞，不知道【bú zhī dào】具体怎么回事）

5、最狠的手段【shǒu duàn】🍱 - !important;

如果实在没有⏳办法解【bàn fǎ jiě】😄决一些🏂细节问【xì jiē wèn】题【tí】🎱，可以用🎥这个方🔏法.FF对于【duì yú】"!important"会自动【huì zì dòng】优先解析，然而IE则会忽略【luè】。如下

值得注【zhí dé zhù】意的是【yì de shì】，一定要将xxxx !important 这句放置在另一句之【yī jù zhī】🍾上，上面已👍经提过💻 undefined undefined