div+css通用兼容性代码整理

一、Div+css通用兼容性代码

你可以在css开头加入 *html{padding:0px}

<style>
*html{padding:0px}
/* Clear Fix */
.clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

CSS+DIV 兼容性问题
浏览器兼容代码：
浏览器

符号
IE6 IE7 IE8 FF
* √ √ × ×
!important × √ × √
_ √ × × ×
/9 × × √ ×
*html √ × × ×
*+html × √ × ×
说明：”√”代表能识别；” ×”代表不识别

1、案例一（常用）
如果各个浏览器的高度都不相同，代码如下：

.warp{
Height:100px; /*IE6、IE7、IE8、FF识别*/
Height:110px/9; /*IE8识别*/
*height:120px!important; /*IE7 识别*/
*height:130px; /*IE6、IE7识别，但上一段代码中!important的级别比*号的级别高，所以此段代码只有IE6中才有效*/
}

2、案例二
如果各浏览器高度只有IE6和IE7中相同，而FF不同，代码如下：

.warp{
Height:100px; /*IE6 、IE7、 IE8、FF识别*/
*height:120px; /*IE6、IE7识别*/
}

3、案例三
对各浏览器单独写不同代码，如下：

.warp{ height:200px; } /* IE6 、IE7、 IE8、FF识别*/
.warp{ height:300px/9;} /*IE8识别*/
*html .warp{ hegith:210px; } /*IE6识别*/
*+ html .warp{ height:300px;} /*IE7识别*/

4、案例四
如果各浏览器高度相同只有IE6的不同，代码如下：

.warp{
Height:100px; /* IE6 、IE7、 IE8、FF识别*/
_Height:120px; /*IE6识别*/
}

关于css部份技巧,div/IE6/IE7/IE8/FF
1.div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
3.浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;