IE火狐兼容性问题

《IE火狐兼容性问题》由会员分享，可在线阅读，更多相关《IE火狐兼容性问题（11页珍藏版）》请在装配图网上搜索。

1、1、float 的 div 一定要闭合。例如：(其中 floatA、floatB 的属性已经设置为 float:left;)这里的NOTfloatC并不希望继续平移，而是希望往下排。这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标 签闭合。在之间加上这个div 一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性 的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为如下即可：.clearclear:both;2、margin加倍的问题。设置为float的div在ie下设置的margin会

2、加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;例如：相应的 css 为#IamFloatfloat:left;margin:5px;/*IE 下理解为 10px*/display:inline;/*IE 下再理解为 5px*/5、最狠的手段 - !important;如果实在没有办法解决一些细节问题，可以用这个方法.FF对于”！important”会自动优先解 析，然而IE则会忽略.如下.tabd1background:url(/res/images/up/tab1.gif) no-repeat 0px 0px!important; /*Sty

3、le for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */ 值得注意的是，一定要将xxxx important这句放置在另一句之上 上面已经提过；IE7.0出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还 是我们，为解决IE7.0的兼容问题，找来了下面这篇文章：现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7 对!important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对

4、IE7不 错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。现在写一个 CSS 可以这样：#example color: #333; 严 Moz * html #example color: #666; /* IE6 *+html #example color: #999; / IE7 */那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为 #999，他们都互不干扰。IE6能识别下划线和星号*, IE7能识别星号，不能识别下划线4、cursor: point可以同时在IE FF中显示游标手指状，hand仅IE可以5

5、、FF:链接加边框和背景色，需设置display: block,同时设置float: left保证不换 行。6、FF（火狐）:设置padding后,DIV会增加height和width,但IE不会，故需要用!important多设一 个 height 和 widthCSS+DIV 的兼容性问题在网站设计的时候，应该注意 css 样式兼容不同浏览器问题，特别是对完全使用 DIV CSS 设计的网，就应该更注意IE6IE7FF对CSS样式的兼容，不然，你的网可能出去不想出现 的效果！所有浏览器 通用 height: 100px;IE6 专用 _height: 100px;IE6 专用 *heigh

6、t: 100px;IE7 专用 *+height: 100px;IE7、 FF 共用 height: 100px !important;一、 CSS 兼容以下两种方法几乎能解决现今所有兼容.1, !important （不是很推荐，用下面的一种感觉最安全）随着IE7对!important的支持important方法现在只针对IE6的兼容.（注意写法.记得该声明 位置需要提前.）代码:#wrapper width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */2, IE6/IE77 对 FireFox *+html与*html是IE特有的

7、标签,firefox暂不支持.而*+html又为IE7特有标签.代码:#wrapper width: 120px; /* FireFox */*html #wrapper width: 80px; /* ie6 fixed */*+html #wrapper width: 60px; /* ie7 fixed, 注意顺序 */ *+html对IE7的兼容 必须保证HTML顶部有如下声明：代码:二、万能float闭合（非常重要!）可以用这个解决多个div对齐时的间距不对，关于 clear float 的原理可参见 How To Clear Floats Without Structural Ma

8、rkup将以下代码加入Global CSS中,给需要闭合的div加上class二clearfiX可，屡试不爽. 代码:/* Clear Fix */ .clearfix:after content:.;display:block;height:0; clear:both;visibility:hidden;.clearfix display:inline-block;/* Hide from IE Mac */.clearfix display:block;/* End hide from IE Mac */* end of clearfix */三、其他兼容技巧（相当有用）1, FF下给di

9、v设置padding后会导致width和height增加，但IE不会.（可用!important 解决）2, 居中问题.1）.垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle.（ 注 意内容不要换行.）2）.水平居中.margin: 0 auto;（当然不是万能）3, 若需给a标签内内容加上样式，需要设置display: block;（常见于导航标签）4, FF和IE对BOX理解的差异导致相差2px的还有设为float的div在ie下margin加 倍等问题.5, ul 标签在 FF 下面默认有 list-style

10、和 padding . 最好事先声明, 以避免不必要的麻烦. （常见于导航标签和内容列表）6, 作为外部wrapper的div不要定死高度，最好还加上overflow: hidden.以达到高度自适 应.7, 关于手形光标.cursor: pointer.而hand只适用于IE.贴上代码： 兼容代码:兼容最推荐的模式。/* FF */.submitbutton float:left;width: 40px; height: 57px;margin-top: 24px; margin-right: 12px;/* IE6 */*html .submitbutton margin-top: 21p

11、x;/* IE7 */*+html .submitbutton margin-top: 21px;什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6 ）访问同一个网站，或者页 面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编 写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。 而兼容就是一种办法，能让你在一个 CSS 里面独立的写支持不同浏览器的样式。这下就和 谐了。呵呵！最近微软发布的IE7浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担，虽然 IE7已经走向标准化，但还是有许多和FF不同的地方，所

12、以需要用到IE7的兼容，有许多 朋友问过IE7的兼容是什么，其实我也不知道。暂时还没找到IE7专用的兼容。除了前面那 片文章，针对 firefox ie6 ie7 的 css 样式中的兼容方式也是很好用的。有一点逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用，下面介绍三个兼容， 例如：（适合新手，呵呵，高手就在这里路过吧。）程序代码第一个兼容， IE FF 所有浏览器 公用（其实也不算是兼容）height:100px;第二个兼容 IE6 专用_height:100px;第三个兼容 IE6 IE7 公用*height:100px;介绍完了这三个兼容了，下面我们再来看看如何在一个样式里分别

13、给一个属性定义IE6 IE7 FF专用的兼容，看下面的代码，顺序不能错哦：程序代码height:100px;*height:120px;_height:150px;下面我简单解释一下各浏览器怎样理解这三个属性：在FF下，第2、3个属性FF不认识，所以它读的是height:100px;在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第 一个属性，所以 IE7 最终读出的是第 2 个属性 *height:120px;在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2 个属性，所以IE6最终读取的是第三个属性。1 针对 firefo

14、x ie6 ie7 的 css 样式现在大部分都是用 !important 来兼容，对于 ie6 和 firefox 测试可以正常显示，但是 ie7 对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的兼容方式 就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样： #1 color: #333; /* Moz */* html #1 color: #666; /* IE6 */*+html #1 color: #999; /* IE*/那么在firefox下字体颜色显示为#333IE6下字体颜色显示为#666, IE7下字体颜

15、色显示为 #999。2 css 布局中的居中问题 主要的样式定义如下：body TEXT-ALIGN: center;#center MARGIN-RIGHT: auto; MARGIN-LEFT: auto; 说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于 IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可 以依次拆出多个div,只要

16、在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。3 盒模型不同解释.#boxwidth:600px;/for ie6.0- width:500px;/for ff+ie6.0#boxwidth:600px!important/for ff width:600px;/for ff+ie6.0width /*/:500px;/for ie6.0-4 浮动 ie 产生的双倍距离#box float:left; width:100px; margin:0 0 0 100px; /这种情况之下 IE 会产生 200px 的距离 display

17、:inline; /使浮动忽略这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始，高度，宽度，行高, 边距都可以控制（块元素）;Inline元素的特点是:和其他元素在同一行上，不可控制（内嵌元 素）;#box display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的的效 果 Diplay:table;5 IE与宽度和高度的问题 IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这 样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用 min

18、-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片， 这个宽度是比较重要的。要解决这个问题，可以这样：#box width: 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px;6 页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能 保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这 一命令在IE上也能用，可以把一个vdiv放到v

19、body标签下，然后为div指定一个类： 然后 CSS 这样设计：#containermin-width: 600px;width:e xpression(document.body.clientWidth 600? “600px”: “auto” );第一个min-width是正常的；但第2行的width使用了 Javascript,这只有IE才认得，这也 会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。7 清除浮动.兼容 boxdisplay:table;/将对象作为块元素级的表格显示或者.兼容 boxclear:both;或者加入:after (伪对象

20、)，设置在对象后发生的内容，通常和content配合使用，IE不支持此 伪对象，非Ie浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的# box:aftercontent: “.”;display: block;height: 0;clear: both;visibility: hidden;8 DIV 浮动 IE 文本产生 3 象素的 bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.#boxfloat:left;width:800px;#leftfloat:left;width:50%;#right width:50%;*html #le

21、ft margin-right:-3px;/这句是关键HTML 代码9 属性选择器（ 这个不能算是兼容, 是隐藏 css 的一个 bug） piddivid piddivid这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围 比较大，如pid中，所有p标签中有id的都是同样式的.10 IE 捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-heigh

22、t属性 或者给#layout使用固定高和宽。页面结构尽量简 单。11 高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象 使用margin 或 paddign 时。例：vpp对象中的内容v/pCSS：#box background-color:#eee; #box p margin-top: 20px;margin-bottom: 20px; text-align:center; 解决方法：在 P 对象上下各加 2 个空的 div 对象 CSS 代码： .1height:0px;overflow:hidden; 或者为DIV加上border属性。屏蔽I

23、E浏览器（也就是IE下不显示）*:lang（zh） select font:12px important; /*FF,OP 可见 */ select:empty font:12px important; /*safari 可见 */这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。仅 IE7 识别*+html 当面临需要只针对IE7做样式的时候就可以采用这个兼容。IE6 及 IE6 以下识别* html 这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.X同样可以识别这个兼容。其它 浏览器不识别。html/*/ body select 这句与上一句的作用

24、相同。仅 IE6 不识别select display /*IE6 不识别*/:none;这里主要是通过CSS注释分开一个属性与值，流释在冒号前。仅 IE6 与 IE5 不识别select/*/ display /*IE6,IE5 不识别*/:none;这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。仅 IE5 不识别select/*IE5 不识别*/ display:none;这一句是在上一句中去掉了属性区的注释。只有IE5不识别盒模型解决方法selct width:IE5.x 宽度；voice-family :; voice-family:inherit; width:正确宽度

25、;盒模型的清除方法不是通过important来处理的。这点要明确。清除浮动select:after content:.; display:block; height:0; clear:both; visibility:hidden;在 Firefox 中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时 用这个清除浮动的兼容来对父级做一次定义，那么就可以解决这个问题 。截字省略号select -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; 这个是在越出长

26、度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只 是目前 Firefox 并不支持。只有 Opera 识别media all and （min-width: 0px） select 针对 Opera 浏览器做单独的设定。以上都是写CSS中的一些兼容，建议遵循正确的标签嵌套（div ul li嵌套结构关系），这样可 以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多 浏览器兼容），很多情况下也许一个兼容都不用也可以让浏览器工作得非常好，这些都是用 来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过 滤器。这些过滤器有的

27、是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中 的通过条件来链接或是导入需要的补丁样式。IE5.X的过滤器，只有IE5.X可见 media tty icontent:;/* */ import ie5win.css; /*; /* */IE5/MAC 的过滤器，一般用不着/*/*/import ie5mac.css;/*/下面是IE的条件注释，个人觉得用条件注释调用相应兼容是比较完美的多浏览器兼容的解 决办法。把需要兼容的地方单独放到一个文件里面，当浏览器版本符合的时候就可以调用那 个被兼容的样式，这样不仅使用起来非常方便，而且对于制作这个CSS本身来讲，可以更 严格的观察到是

28、否有必要使用兼容，很多情况下，当我本人写 CSS 如果把全部代码包括兼 容都写到一个 CSS 文件的时候会很随意，想怎么兼容就怎么兼容，而你独立出来写的时候， 你就会不自觉的考虑是否有必要兼容，是先兼容CSS?还是先把主CSS里面的东西调整到 尽可能的不需要兼容？当你仅用很少的兼容就让很多浏览器很乖很听话的时候，你是不是很 有成就感呢？你知道怎么选择了吧呵呵IE的if条件兼容自己可以灵活使用参看这篇IE条件注释Only IE所有的 IE 可识别只有IE5.0可以识别Only IE 5.0+IE5.0包换IE5.5都可以识别仅 IE6 可识别Only IE 7/-IE6以及IE6以下的IE5.x

29、都可识别Only IE 7/-仅 IE7 可识别Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼 容，很多的!important来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网 站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕？而他 们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道 IE 和 Firefox 并不不是那么 的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了兼容的 办法，你就掌握了一切，我们并不是兼容的奴隶。div ul li 的嵌套顺序今天只讲

30、一个规则。就是vdivvu卜vli的三角关系。我的经验就是vdiv 在最外面，里面是 ul，然后再是li,当然li里面又可以嵌套vdiv什么的，但是并不建议你嵌套很多东西。 当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是 vdiv里面放vli,而不用vu卜的时候，你会发现你的间隙十分难控制，一般情况下，IE6和IE7 会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前面的内容又空了很 大一块，出现这种情况虽然你可以改变IE的Margin,然后调整Firefox下面的Padding，以 便使得两者显示起来得效果很相似，但是你得CSS将变得臭长无比，你不

31、得不多考虑更多 可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。具体嵌套写法遵循上面得嵌套方式， 然后在 CSS 里面告诉 ul Margin:Opx;Padding:Opx;list-style:none;,其中 list-style:none 是不让vli标记的最前方显示 圆点或者数字等目录类型的标记，因为IE和Firefox显示出来默认效果有些不一样。因此这 样不需要做任何手脚，你的IE6、和IE7、Firefox显示出来的东西（外距，间距，高度，宽度） 就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的差别，但那已经很 完美了，不需要你通过调整大

32、片的 CSS 来控制它们的显示了，你愿意，你可以仅仅兼容一 两个地方，而且通常这种兼容可以适应各种地方，不需要你重复在不同的地方调试不同的兼 容方式诚轻你的烦。你可以ul.classl, ul.class2, ul.class3 xxx:xxxx的方式方便的整理出你 要兼容的地方，而统一兼容。尝试一下吧，再也不要乱嵌套了，虽然在 Div+CSS 的方式下 你几乎可以想怎么嵌套就怎么嵌套，但是按照上面的规律你将轻松很多，从而事半功倍！1.超链接访问过后 hover 样式就不出现的问题?被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序: L

33、-V-H-A2.IE6 的双倍边距 BUG例如:body margin:0div float:left; margin-left:10px; width:200px; height:200px; border:1px solid red 浮动后本来外边距10px,但IE解释为20px,解决办法是加上 display:inline3. 为什么FF下文本无法撑开容器的高度？标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的，那我又想固 定高度，又想能被撑开需要怎样设置呢？办法就是去掉 he ight 设置 min-heigh t:200px;这里为了照顾不认识min-height的IE6可以

34、这样定义：div height:auto!important; height:200px; min-height:200px; 4. 为什么 web 标准中 IE 无法设置滚动条颜色了?原来样式设置：body scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-da

35、rkshadow-color:#fff; 解决办法是将 body 换成 html5. 为什么无法定义 1px 左右高度的容器?IE6 下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px6. 怎么样才能让层显示在 FLASH 之上呢?解决的办法是给 FLASH 设置透明:7. 怎样使一个层垂直居中于浏览器中?这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度 高度除以二8、firefox 嵌套 div 标签的居中问题的解决方法假定有如下情况： 如果要实现 b 在 a 中居中放置，一般只需用 CSS 设置 a 的 text-align 属性 为 center 。这样的方法在 IE 里看起来一切 正常；但是在 Firefox 中 b 却会是 居左的。解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为： margin: 0 auto;。