css tips（兼容性总结）

1\ie6下最小高度：

min-height:100px;//IE7\FF

height:auto!important;//IE6\IE7\FF 这个很重要，IE6定死高度后，需要再加上这条，才能自动延伸。

height:100px;//IE6


2\ie6、ie7、ie8、firefox兼容写法

<style type=”text/css”>
#body {
border:2px solid #00f;     /*ff的属性*/
border:2px solid #090\9;   /* IE6/7/8的属性 */
border:2px solid #F90\0;     /* IE8支持 */
_border:2px solid #f00;     /*IE6的属性*/
.all IE{property:value\9;}
.gte IE 8{property:value\0;}
.lte IE 7{*property:value;}
.IE 8/9{property:value\0;}
.IE 9{property:value\9\0;}
.IE 7{+property:value;}
.IE 6{_property:value;}
.not IE{property//:value;}
}
</style>

3\实现散列等高布局

在三列分别加上:（padding-bottom:10000px;margin-bottom:-10000px;）(注：firefox下需要外包层)

4\文字两端对齐

text-align:justify;text-justify:inter-ideograph

5\ie6下图片上下之间默认间距
 解决方法：给图片加个高度就ok

6\隐藏文字
font-size:0;line-height:0（可以隐藏文字）

7\在浏览器（IE 除外）中给 table 定义 position:relative 属性是无效的

解决方法：在table中增加div模拟

8\IE6下图片下方有空隙的解决方法
解决方法：vertical-align:top|bottom|middle

9\ie下中英文混排时文字基线高低不一致bug 

方法：设定英文字体为 Arial，中文字体为宋体。同时设定行高line-height为1.231.

10\IE6下图片下方有空隙产生
方法：设置img display:block;或设置vertical-align:top|bottom;

11\.如何对齐文本与文本输入框
方法：加上 vertical-align:middle; 

12\web标准中IE无法设置滚动条颜色；
 解决办法是将body换成html 

13\IE6无法定义1px左右高度的容器 
解决办法：加上overflow:hidden；

14\怎么样才能让层显示在FLASH之上呢?解决的办法是给FLASH设置透明 
 <param name="wmode" value="transparent" />

15\怎样使一个层垂直居中于浏览器中
使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
{
position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px;border:1px solid red;  
}

16\图片垂直与容器内 
{
width:100px;height:100px;dispaly:table-cell;vertical-align:middle;
//only ie
*display:block;
*font-size:0.823*100=82.3px;
*font-family:arial;
}
注：（firefox中要清除浮动，否则无效）

17\改变checkbox大小的方法：

<input type="checkbox" style="zoom:200%">