浏览器兼容性解决方案

《浏览器兼容性解决方案》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

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

3、px!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;/*FF+IE7*/ height:200px;/

4、*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、IE6IE7FF各不相同 #example{ height:100px;/*FF*/ _height:200px;/*IE6*/ *+height:300px;/*IE7*/ } 或： #example{ height:100px;/*FF*/ *height:30

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

6、00px;只有IE6认识，所以IE6就又覆盖了在第二行得到的height,最终显示200px 这样，三个浏览器都有自己的height属性了，各玩各的去吧 这样说要是你还不明白，要么你去撞墙，要么我去!不过还是你去比较好。 哦，差点忘了说了： *+html对IE7的兼容必须保证HTML顶部有如下声明： 〈!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"　对css缩写的支持问题：不论是ie还是ff对css的缩写都有一小点问题比如border:0xpsolid#fff;两个浏览器支持都没有问题但对于四个边的mag

7、in不同情况下，就不能用这种缩写了，无论是ie还是ff又会出现边界解释错误，而导致页面变形正确缩写：border-width:0px1px2px3px;border-style:solid;border-color:#fff;第二点是ie对于css的maginpadding等默认值为0px，但ff却不一样，为了保持外观的统一性，即使padding为0你也要写上，以免ff在浏览中的错位。 IE与Firefox的CSS兼容大全1.DOCTYPE影响CSS处理2.FF:div设置margin-left,margin-right为auto时已经居中,IE不行