css浏览器的兼容性

1、 div垂直居中

不支持内容换行。

1 Vertical-align:middle;
2 line-height(value) == height(value);

 

2、 margin加倍问题 (IEbug)

问题：div设置为float时，在IE下margin会加倍

解决：在div中加上

1 display:inline;

 

3、 IE中最小宽度与高度问题

问题：IE不认识min- 这个定义，IE实际上把正常的height和width当作min-来用，如果只设置了width和height，正常的浏览器这两个值就不会变，如果只使用min-width和min-height，那么在IE下面相当于没有设置宽度和高度。

1 #box{ width: 80px; height: 35px; }
2 
3 Html>body  #box{ width:auto; height:auto; min-width:80px; min-height:35px;}

 

4、 div浮动，IE文本产生了3px的bug

问题：左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的距离。

1 <div id=”box”>
2     <div id=”left”></div>
3     <div id=”right”></div>
4 </div>
5 
6 #box { float:left; width: 80px; }
7 #left { float:left; width: 50%; }
8 #right { width: 50%; }
9 *html  #left{ margin-right: -3px;}

 

5、 float的div的闭合清除浮动，自适应高度

加<div class=”clear”></div>  .clear{ clear:both; }

这个div必须是与具有float属性的div平级，不能嵌套。

问题：作为外部的wrapper的div不要定死高度。为了要让高度进行自适应，在wrapper里加上overflow:hidden; 当包含float的box时，高度自适应在IE下无效。

解决：这时应触发IE的layout私有属性：zoom:1;

 

6、 高度不适应，当内层对象高度发生变化时，外层高度不能自动调节

问题：

1 <div id=”box”>
2     <p>   content   </p>
3 </div>
4 
5 #box { margin-top:20px; margin-bottom: 20px; text-align:center; }

 

解决：在<p>的上下各加一个空的div

1 <div id=”box”>
2     <div class=”so”></div>
3     <p>   content   </p>
4     <div class=”so”></div>
5 </div>
6 
7 .so{ height:0px; overflow: hidden;  }

 

7、 IE6下图片有空隙产生

设置img为display:block或设置vertical-align属性

 

8、 对齐文本与输入框

为input 加上

1 vertical-align:middle;

 

9、 Li中内容超过长度以后省略号显示的方法，适于IE、OP

1 li{ width:200px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden;  }

 

10、IE6下无法定义高度为1px的容器，是由其默认的行高造成的

1 overflow:hidden || zoom: 0.08 || line-height: 1px

 

11、居中问题

问题：FF中div居中margin-left，margin-right设置为auto即可，IE不行

解决：IE需要设置父元素

text-align:center;

 

12、游标手指

 hand只有IE支持。

Cursor:pointer; 

 

13、form标签在IE中会被自动加上一些 margin 而FF中没有，应该被清零。

 

14、ul在FF中默认有padding值，在IE中默认为margin值，应该都清零

Ul{ margin:0px; padding:0px; }

 

15、box在IE与FF中解释相差2px。