浏览器兼容.docx

什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。1.cursor: pointer可以同时在 IE、 FF 中显示游标手指状， hand 仅 IE 可以2. CSS+DIV的兼容性问题在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网可能出去不想出现的效果！所有浏览器 通用 height: 100px;IE6 专用 _height: 100px;IE6 专用 *height: 100px;IE7 专用 *+height: 100px;IE7、FF 共用 height: 100px !important;3. FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)margin加倍的问题。设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;例如：相应的css为#IamFloatfloat:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/4、最狠的手段 -!important;如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下.tabd1background: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这句放置在另一句之上；5、兼容代码:兼容最推荐的模式。/* FF */.submitbutton float:left;width: 40px;height: 57px;margin-top: 24px;margin-right: 12px;/* IE6 */*html .submitbutton margin-top: 21px;/* IE7 */*+html .submitbutton margin-top: 21px;6.浮动ie产生的双倍距离#box float:left; width:100px; margin:0 0 0 100px; /这种情况之下IE会产生200px的距离 display:inline; /使浮动忽略这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,不可控制(内嵌元素);#box display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的的效果Diplay:table;7. IE6的双倍边距BUGbodymargin:0div float:left; margin-left:10px; width:200px; height:200px; border:1px solid red 浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline8. firefox嵌套div标签的居中问题的解决方法假定有如下情况： 前台样式最烦人的就是各种浏览器跟分辨率的 兼容问题首先需要了解各个浏览器之间样式在哪几方面容易出问题IE支持自定义光标文件cursor:url()IE支持自定义滚动条颜色风格IE6中的select有永远处在最上的bug,而且css对select不起作用。在form中，IE支持label，包括文字和图片；但是火狐不支持图片的label，点击图片不能让label for的radio或者checkbox产生效果。IE和火狐都是支持onscroll事件的，但是火狐中textarea对此事件不支持。CSS方面，IE中支持在CSS中嵌入expresion，而Firefox不支持火狐支择相邻子选择符“”，而IE6不支持（IE7支持）火狐对display的inline-block不支持，而IE均支持。CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和火狐存在很大的解析差异，这里介绍一下兼容要点。对高度的解析IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度火狐：没有定义高度时，如果内容中包括了图片内容，火狐的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！img对象alt和title的解析alt：当照片不存在或者load错误时的提示；title：照片的tip说明。在IE中如果没有定义title，alt也可以作为img的tip使用，但是在火狐中，两者完全按照标准中的定义使用结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用其他的细节差别当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在火狐里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。其实这里还有另外一个问题，就是IE对于空格的处理，火狐是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在火狐里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和火狐的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。10大兼容要点1、DOCTYPE 影响 CSS 处理2、火狐: div 设置margin-left, margin-right 为 auto 时已经居中, IE 不行3、火狐: body 设置 text-align时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4、火狐: 支持!important, IE 则忽略, 可用 !important 为火狐特别设置样式，值得注意的是，一定要将xxxx !important 这句放置在另一句之上5、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行6、cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以7、火狐: 链接加边框和背景色，需设置display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。8、在火狐和IE中的BOX模型解释不一致导致相差2px解决方法：divmargin:30px!important;margin:28px;注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：divmaring:30px;margin:28px重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;9、ul标签在火狐中默认是有padding值的,而在IE中只有margin有值所以先定义ulmargin:0;padding:0;接下来就是IE6/IE7/IE8以及火狐浏览器中兼容样式的写法IE6：top_width:100px;此种方法只有IE6可识别IE7/8跟火狐无法识别IE7：*+htmltopwidth:100px;此种方法只有IE7可识别 IE6/8跟火狐无法识别IE8：topwidth:100px;火狐：:root body topwidth此种写法仅火狐能识别 IE 浏览器无法识别如果只让ff、IE8看见用html/*/body .headcolor:#000;如果只是不让ie6看见用htmlbody.headcolor:#000; 即对IE 6无效如果只是不让ff、IE8看见用*body.headcolor:#000; 即对ff、IE8无效html*color:#f00 支持IE6 IE7 不支持 IE8 FFbodypcolor:#f00 支持IE7 IE