FF与IE兼容问题

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

1、CSS 对浏览器器的兼容性具有很高的价值，通常情况下 IE 和 Firefox 存在 很大的解析差异，这里介绍一下兼容要点。常见兼容问题：1. DOCTYPE 影响 CSS 处理2. FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3. FF: body 设置 text-align 时，div 需要设置 margin: auto(主要 是 margin-left,margin-right) 方可居中4. FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !importa

2、nt 多设一个 height 和 width5. FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别 设置样式6. div 的垂直居中问题: vertical-align:middle; 将行距增加到和整 个 DIV 一样高 line-height:200px; 然后插入文字，就垂直居中了缺点是要控制 内容不要换行7. cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以8. FF: 链接加边框和背景色，需设置 display: block， 同时设置 float:left 保证不换行。参照 menu

3、bar， 给 a 和 menubar 设置高度是为了避 免底边显示错位， 若不设 height， 可以在 menubar 中插入一个空格。9. 在 mozilla firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px 解 决方法：divmargin:30px!important;margin:28px;注意这两个margin的顺序一定不能写反，据阿捷的说法！important这 个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：divmaring:30px;margin:28px重复定义的话按照最后一个来执行，所以不可以只写 margin:XXpx！imp

4、ortant;10.IE5和IE6的BOX解释不一致IE5 下divwidth:300px;margin:0 10px 0 10px;div的宽度会被解释为300px-10px（右填充）-10px（左填充）最终div的 宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px（右填 充）+10px（左填充）=320px来计算的。这时我们可以做如下修改divwidth:300px!important;width /*/:340px;margin:0 10px 0 10px关于这个/*/是什么我也不太明白，只知道IE5和firefox都支持但 IE6不支持，如果有人理解的话，请告诉

5、我一声，谢了！：）ll.ul标签在Mozilla中默认是有padding值的，而在IE中只有margin 有值所以先定义ulmargin:0;padding:0;就能解决大部分问题注意事项：1、float的div 一定要闭合。例如： （其中 floatA、 floatB 的属性已经设置为 float:left;）这里的 NOTfloatC 并不希望继续平移，而是希望往下排。这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float 标签，必须将float标签闭合。在之间加上这个 div 一定要注意声明位置，一定要放在最恰当的地方，而且必须与 两个具有float属性的div同

6、级，之间不能存在嵌套关系，否则会产生异常。并且将 clear 这种样式定义为为如下即可：.clearclear:both;此外，为了让高度能自动适应，要在 wrapper 里面加上 overflow:hidden;当包含 float 的 box 的时候，高度自动适应在 IE 下无效，这时候应该 触发IE的layout私有属性（万恶的IE啊！）用zoom:l;可以做到，这样就达到 了兼容。例如某一个 wrapper 如下定义：.colwrapperoverflow:hidden;zoom:1;margin:5px auto;2、margin 加倍的问题。设置为float的div在ie下设置的ma

7、rgin会加倍。这是一个ie6都存 在的 bug。解决方案是在这个div里面加上display:inline;例如：相应的 css 为#IamFloatfloat:left;margin:5px;/*IE 下理解为 10px*/display:inline;/*IE 下再理解为 5px*/3、关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个 float 的 div 时， 宽度很容易出现问题。在 IE 中，外层的宽度会被内层更宽的 div 挤破。一定要 用 Photoshop 或者 Firework 量取像素级的精度。4、关于高度的问题 如果是动态地添加内容，高度最好不要定义。浏

8、览器可以自动伸缩，然 而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道 具体怎么回事）5、最狠的手段 - !important;如果实在没有办法解决一些细节问题，可以用这个方法.FF对于 !important会自动优先解析，然而IE则会忽略.如下.tabd1 background:url（/res/images/up/tab1.gif） no-repeat 0px0px !important; /*Style for FF*/background:url（/res/images/up/tab1. gif） no-repeat 1px 0px; /* Style for I

9、E */值得注意的是，一定要将 xxxx !important 这句放置在另一句之上， 上面已经提过Firefox、IE 对 CSS 的兼容性整理1、firefox 和 IE 对某些 css 样式的认定有不少区别，包括：ul和ol的默认padding值是不一样的，在Firefox中，padding-left默认值为 40px左右，而IE中为0, 般设置ulmargin:0;padding:0;就能解决大部分 问题。并列排列的多个元素（图片或者链接）的代码中的空格和回车会造成元素之间的 间隙，而在firefox中和IE中显示是不一样的，IE显示空格（约8px）、firefox 显示空格（约 4p

10、x）。对不规范代码的兼容情况不同，IE中漏掉的关闭符号对显示不造成影响，而 firefox 中就会形成错乱的布局。firefox对于宽高尺寸的严格解析会造成与设置不匹配（超出）的图片或表格将 原设置 div 撑大。未定义id的div，在IE中会与div属性中的其他设置有关，而在firefox中的 位置会于div在文件中位置有关，紧随前一个div出现。设置为float的div在ie下设置的margin会加倍的，特别是margin-left,这 是 ie6 的一个 bug 。解决的方法是在这个 div 里面加上 display:inline; 如果是动态地添加内容，高度最好不要定义。浏览器可以自动

11、伸缩，然而如果是 静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么 回事）FF: div 设置 margin-left, margin-right 为 auto 时已经居中，IE 不行。IE 里设置text-align:center,就居中了，但在FF中不行。所以一般两个都要设 置。FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要 用 !important 多设一个 height 和 widthFF对于！important会自动优先解析，然而IE则会忽略.如下.tabdbackground:url（/res/im

12、ages/up/tab1.gif） no-repeat 0px 0px ！important; /*Style for FF*/background:url（/res/images/up/tab1.gif）no-repeat1px0px;/*Stylefor IE */FF: 链接加边框和背景色，需设置 display:block, 同时设置 float:left 保 证不换行。2、针对 firefox ie6 ie7 的 css 样式现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示, 但是ie7对！important可以正确解释，会导致页面没按要求显

13、示！找到一个针 对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有 问题了。现在写一个 CSS 可以这样：#1 color: #333; /* Moz */* html #1 color: #666; /* IE6 */*+html #1 color: #999; /* IE7 */那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字 体颜色显示为#999。3、firefox下多层嵌套时内层设置了浮动外层设置背景时背景不显示这主要是内层设置浮动后外层高度在firefox下变为0，所以应该在外层与内层 间再嵌一层，设置浮动和宽

14、度，然后给这个层设置背景（听说还有其他方法，感觉还是这方法好使）4、属性选择器（这个不能算是兼容, 是隐藏 css 的一个 bug piddivid这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性 选择器的范围比较大，如pid 中,所有p标签中有id的都是同样式的.5、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案 当 Content 内容多时，即使 parent 设置了高度 100% 或 auto, 在不同浏览器下还 是不能完好的自动伸展。 解决方案 在层的最下方产生一个高度为 1 的空格，可解除这个问