浏览器兼容性问题.doc

1、 ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了。 2、flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如margin-left:10px !important;/*IE7,IE8,FF下是10PX*/; margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10px*/3、清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片的时候，会出现背景断开或差一小块。解决方法是在出现兼容的DIV的CSS中写一个display:block，或其它属性，中文什么意思我不知道，我英语差，但能达到想要的效果。4、很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好了，但是在FF出问题了，用!important又会把IE7做的不兼容，有没有什 么方法只对FF下进行操做，我用过这个方法，就是在属性前面加符号如：*、&，￥，#，?，+，加过符号的属性只有IE的浏览器才识别，而 FF不识别，方法如下(注意有符号的属性和没符号的属性的顺序)height:100px;/*FF下显示100的高*/height:120px;/*IE678下显示120高*/5、有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS里面写个clear:both;如下 中问题，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原 因：1、 一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。2、就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中， 必须用绝对宽度。6、再就是局中问题，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，一般有这两个原因：（1） 一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。（2）就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中，必须用绝对宽度。NextPage7、扩展：如果我想在设计的时候，实现IE6，IE7,FF下出现三种不同的效果，比如IE6下背景红色，IE7下蓝色FF下绿色，这里，我自己试过，可以，用兼容的方法（注意顺序，可以好好理解一下）。background:red;/*FF里显示的红色*/background:blue !important;/*IE7下面显示的蓝色*/+background:green;/*IE6下面显示的绿色*/多做，做练，使终把盒子模型放在心中，才会熟练，才会运用自如，才会在做的时候，自然而然就知道哪里会有兼容问题，直接在测试前就解决掉那些最常见的兼容问题。1、!important 随着IE7对!important的支持,现在IE7和FF都支持!important，可以用!important来区分FF、IE7和IE6的高度。用法如下：Html代码 局中问题，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原 因：1、 一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。2、就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中， 必须用绝对宽度。2、IE6/IE7对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签,IE6暂不支持。用法如下：Html代码 Html代码 height:50px; /*For Firefox*/ *height:100px; /*For IE7 & IE6*/ _height:150px; /*For IE6*/ height:50px; /*For Firefox*/*height:100px; /*For IE7 & IE6*/_height:150px; /*For IE6*/同样可以用相同的原理来为IE6、IE7、FF设置不同的width,height,margin,padding等属性局中问题，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原 因：1、 一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。2、就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中， 必须用绝对宽度。3、min-height IE不认min-height,FF识别,利用以上这些属性，我们可以这样定义最小高度。Html代码 因为在IE里（包括IE6,IE7）认为height就是最小高度，当content中的内容超出设置的高度时，在FF中可以用min-height设置 最小高度，这时即使超出content的高度，背景颜色也会自动延伸下去。但IE不识别min-height，所以要加hack（对程序所作的修改， 在尚未被开发者接受并集成到正式版本中之前被称为hack）。局中问题，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原 因：1、 一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。2、就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中， 必须用绝对宽度。4、区别不同浏览器，Css hack写法： 区别IE6与FF：background:orange; *background:blue;区别IE6与IE7：background:green !important; background:blue;区别IE7与FF：background:orange; *background:green;区别FF，IE7，IE6：background:orange; *background:green !importan