伍玖壹网络-企业网站建设 企业网站模板

1、ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了。
<meta http-equiv="x-ua-compatible" content="ie=7" />
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;如下
<div style="float:left;height:100px; width:500px;">
<div style="clear:both;">
<div style="height:100px; width=300px">

6、再就是局中问题，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，一般有这两个原因：
（1） 一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。
（2）就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中，必须用绝对宽度。
[NextPage]
7、扩展：如果我想在设计的时候，实现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代码
<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:100px !important;}/* Moz+IE7 */
.content{background:#a5a5a5;height:200px;}/* IE6 */
-->
</style>
<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:100px !important;}/* Moz+IE7 */
.content{background:#a5a5a5;height:200px;}/* IE6 */
-->
</style>
2、IE6/IE7对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签,IE6暂不支持。

用法如下：

Html代码 
<style rel="stylesheet" type="text/css"> 
<!-- 
.content{background:#a5a5a5;height:100px;}/* Moz */ 
*html .content{background:#a5a5a5;height:200px;}/* IE6 */ 
*+html .content{background:#a5a5a5;height:300px;}/* IE7 */ 
--> 
</style> 
<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:100px;}/* Moz */
*html .content{background:#a5a5a5;height:200px;}/* IE6 */
*+html .content{background:#a5a5a5;height:300px;}/* IE7 */ 
-->
</style>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等属性。

3、min-height 
IE不认min-height,FF识别,利用以上这些属性，我们可以这样定义最小高度。

Html代码 
<style rel="stylesheet" type="text/css"> 
<!-- 
.content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;} 
--> 
</style> 
<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;}
-->
</style>
因为在IE里（包括IE6,IE7）认为height就是最小高度，当content中的内容超出设置的高度时，在FF中可以用min-height设置最小高度××，这时即使超出content的高度，背景颜色也会自动延伸下去。但IE不识别min-height，所以要加hack（对程序所作的修改，在尚未被开发者接受并集成到正式版本中之前被称为hack）。

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 !important; *background:blue;
1. vertical-align属性适用于：行内元素和单元格（table-cell）元素
2.ie6内 含有替换元素（img/input等）的行 line-height失效，如果你只有1行内容，可以使用padding来模拟居中。