css常见兼容性问题

1、  如何定义高度很小的容器？

正解：在IE6下无法定义小高度的容器，是因为有一个默认的行高。

列举2种解决方案：overflow:hidden或font-size:容器高度px

 

2、  图片下方出现几像素的空白间隙？

正解：将img定义为display:block,或定义父容器为font-size:0

 

3、  IE6双倍margin的BUG?

正解：display:inline

 

4、  如何让层在falsh上显示？

正解：在falsh上添加<param name="mode" value="transparent"/>

 

5、  如何使得文字不换行？

正解：定义包含文字的容器为：width:xxx;white-space:nowrap;

 

6、  ie中如何让超出宽度的文字显示为省略号？

正解：定义容器为overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

 

7、  如何使得英文单词不发生词内断行？

正解：word-wrap:break-word;

 

8、  如何区别display:none与visibility:hidden?

正解：相同的是display:none与visibility:hidden都可以用来隐藏某个元素；不同的是display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。

 

9、如何实现ie6下的position:fixed?

正解：html{_overflow:hidden;}

body{_overflow:auto;height:100%;}

.fixed{position:fixed;_position:absolute;left:0;top:0;padding:10px;background:#000;color:#fff;}

 

10、  如何让min-height兼容ie6?

正解：.min-height{min-height:100px;_height:100px;}  <divclassdivclass="min-height">我是兼容的min-height</div>

 

11、已知高度的容器如何在页面中水平垂直居中？

正解：

示例：<style type="text/css">

#box{width:200px; height:200px; background:#f00; position:absolute; left:50%; top:50%; margin:-100px 0 0 -100px;}

</style>

<div id="box"></div>

注：出处不详