浏览器兼容性解决方案

1、所有浏览器 通用height: 100px;IE6 专用_height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7、 FF 共用height: 100px !important;什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6访问同一个 网站,或者页面的时候,会出现一些不兼容的问题,在这种浏览器下显示正常, 在另一种下就乱了,我们在编写 CSS 的时候会很恼火,刚修复 了这个浏览器的 问题, 结果另外一个浏览器却出了新问题。 好吧, 我服了行吧, 那我就利用你们 的不兼容各写一段 css, 让他们各执行各的

2、,呵呵。一、 !important (功能有限 随着 IE7对 !important 的支持 , !important 方法现在只针对 IE6的兼容 .(注意 写法 . 记得该声明位置需要提前 .例如 :#example width: 100px !important; /* IE7+FF */width: 200px; /* IE6 */二、 CSS HACK的方法 (新手可以看看,高手就当路过吧 首先需要知道的是:所有浏览器 通用 height: 100px;IE6 专用 _height: 100px;IE7 专用 *+height: 100px;IE6、 IE7 共用 *height:

3、100px;IE7、 FF 共用 height: 100px !important;例如:#example height:100px; /* FF */* html #example height:200px; /* IE6 */ *+html #example height:300px; /* IE7 */ 下面的这种方法比较简单举几个例子:1、 IE6 - IE7+FF#example height:100px; /* FF+IE7 */_height:200px; /* IE6 */其实这个用上面说的第一种方法也可以#example height:100px !important; /*

4、 FF+IE7 */ height:200px; /* IE6 */2、 IE6+IE7 - FF#example height:100px; /* FF */*height:200px; /* IE6+IE7 */3、 IE6+FF - IE7#example height:100px; /* IE6+FF */*+height:200px; /* IE7 */4、 IE6 IE7 FF 各不相同#example height:100px; /* FF */_height:200px; /* IE6 */*+height:300px; /* IE7 */或:#example height:1

5、00px; /* FF */*height:300px; /* IE7 */_height:200px; /* IE6 */需要注意的是, 代码的顺序一定不能颠倒了, 要不又前功尽弃了。 因为浏览器在 解释程序的时候, 如果重名的话, 会用后面的覆盖前面的, 就象给变量赋值一个 道理,所以我们把通用的放前面,越专用的越放后面解释一下 4的代码:读代码的时候,第一行 height:100px; 大家都通用, IE6 IE7 FF 都显示 100px 到了第二行 *height:300px; FF 不认识这个属性, IE6 IE7都认,所以 FF 还显示 100px ,而 IE6 IE7把第一行得

6、到的 height 属性给覆盖了,都显示 300px 到了第三行 _height:200px;只有 IE6认识, 所以 IE6就又覆盖了在第二行得到的 height, 最终显示 200px这样,三个浏览器都有自己的 height 属性了,各玩各的去吧这样说要是你还不明白,要么你去撞墙,要么我去 ! 不过还是你去比较好。哦,差点忘了说了:*+html 对 IE7的兼容 必须保证 HTML 顶部有如下声明: !DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"对 css 缩写的支持问题:不论是 ie 还是 ff 对

7、 css 的缩写都有一小点问题比如border: 0xp solid #fff;两个浏览器支持都没有问题但对于四个边的 magin 不同情况下,就不能用这种缩写了,无论是 ie 还是 ff 又会出现边界解释错误,而导致页面变形正确缩写:border-width:0px 1px 2px 3px;border-style:solid;border-color:#fff;第二点是 ie 对于 css 的 magin padding 等默认值为 0px ,但 ff 却不一样, 为 了保持外观的统一性, 即使 padding 为 0你也要写上, 以免 ff 在浏览中的错位。IE 与 Firefox 的

8、CSS 兼容大全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 不会 , 故需要 用 !important 多设一个 height 和 width5. FF: 支持 !important, IE 则忽略 , 可 用 !imp

9、ortant 为 FF 特别设置样式, 值得注意的是,一定要将 xxxx !important 这句放置在另一句之上6.div 的垂直居中问题 : vertical-align:middle; 将行距增加到和整个 DIV 一 样高 line-height:200px; 然后插入文字, 就垂直居中了。 缺点是要控制内容不 要换行7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。 参照 menubar, 给 a 和 menuba

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

11、.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不支持, 如果有人

12、理解的话,请告诉我一声,谢了!:11.ul 标签在 Mozilla 中默认是有 padding 值的 , 而在 IE 中只有 margin 有值所 以先定义 ulmargin:0;padding:0;就能解决大部分问题注意事项:1、 float 的 div 一定要闭合。例如:(其中 floatA 、 floatB 的属性已经设置为 float:left;<#divid="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >这里的 NOTfloatC 并

13、不希望继续平移,而是希望往下排。这段代码在 IE 中毫无问题,问题出在 FF 。原因是 NOTfloatC 并非 float 标签, 必须将 float 标签闭合。在 <#div class="floatB"><#div class="NOTfloatC">之间加上 <#div class="clear">这个 div 一定要注意声明位置, 一定要放在最恰当的地方, 而且必须与两个具有 float 属性的 div 同级,之间不能存在嵌套关系,否则会产生异常。并且将 clear 这种样式定义为为如下即可:.clearclear:both;此外,为了让高度能自动适应,要在 wr