CSS设计中常见的精华问题收集

firefox下，内容float时，父容器不能被撑开（闭合容器或清除浮动问题）：<div><p>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全</p></div>CSS代码如下：div {
width:200px;
border:1px solid red
}
p {
float:left;
width:100px;
}现象：

可以看到，父容器没有随着子容器而扩张。
解决方法：（1）加入<div style="clear:both"></div>清除浮动。
（2）为父容器也添加float:left;属性。
（3）.gainlayout{display:inline-block;} .gainlayout{display:block;}
IE6的双倍边距BUG：
在IE中，对一个div浮动时，并设定该div的margin时，会出现双倍的margin值。
CSS代码：float:left;
margin-left:100px;现象：

解决方法：加上display:inline即可。
IE6下图片下方有空隙：
现象：

解决方法：解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block。
或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom
都可以解决。
IE6下这两个层中间有间隙：
代码：<div class="left">aaaaaa</div>
<div class="right">aaaaaa</div>CSS代码：.left {
float:left;
width:100px;
height:100px;
background:red
}
.right {
width:100px;
height:100px;
background:orange
}现象：

解决方法：这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义“.left margin-right:-3px;”。
FF下文本无法撑开容器的高度：
CSS代码：div {
width:200px;
height:100px;
border:1px solid red
}现象：

可以看到，当文字的内容高度超过容器规定的高度时，容器不能自动撑开。
解决方法：标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：
{
height:auto !important;
height:100px;
min-height:100px;
}
IE6下容器的宽度BUG：
现象：

解决方法：
（1）div
{
border: 20px;
padding: 20px;
width: 200px;
}
* html div
{
width: 280px;
w\idth: 200px;
}
（2）div
{
border: 20px;
padding: 20px;
width: 200px !important;
width: 280px;
width/**/:/**/200px;
}
（3）div
{
border: 20px;
padding: 20px;
width: 200px !important;
width /**/:280px;
}
IE6无法定义1px左右高度的容器：
现象：

解决方法：解决的方法有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

前一页:网页制作,改变你的思维方

后一页:DIV+CSS之自动换行