css常见问题解决方案（个人总结）

1，有关DIV居中的问题。

在body中如果设置DIV#box居中的话,用text-align:center；

效果是在IE6中可实现居中，且box中的文字也居中，而在FF中的表现是，文字居中，层box默认居左；为了改变这种差异一般用：

body{margin:auto;} box{margin:auto;}这样在IE6和FF中都一样；

2,float浮动元素。

float可定位DIV，而设置为float的DIV其margin值在IE下会加倍，FF中不会。这样如果设计者对多个浮动的DIV进行了margin设置（如#item1,#item2,#item3{float:left;margin-left:5px;}），则显示结果在IE下与FF下会有很大差异。解决方案是在这个DIV中加入display:inline;如：

#item1,#item2,#item3

{float:left;

 margin-left:5px; /*ie理解为10px*/

 display:inline; /*ie再理解为5px*/

}

3,ul标签

ul和uo在FF中默认的padding值不为0，在ie中默认的margin值不为0；因此在对UL进行操作之前先定义ul{margin:0; padding:0;}，之后对ul时行的设置，在两种浏览器是表现一致的。

4，FF中BOX内容能自动伸到页面底部的方法。

在IE中使用height:auto;可使高度随内容增加，而在firefox中高度就成固定的，BOX里面的子层会溢出。

解决这个问题可以在BOX中加入一个隐藏的层：<div id="clearbox"></div>,这个层做为BOX的最后一个子层，高度自适应问题就可解决。

clearbox定义如下：

.clearbox{

 border-top:1px solid transparent!important;

 margin-top:-1px!important;

 border-top:0;

 margin-top:0;

 clear:both;

 visibility:hidden;

}

其作用就是解决浮动元素引起父元素无法获得高度的问题。

5, 另外，设置 overflow:auto;也可以；

6,当文字和图片在同一行出现时，如何才能使他们在垂直方向居中呢？

  <div id="abc">文字一：<img src="../pic/btn.gif" /></div>

关键在于CSS中对图片文件加上#abc img{vertical-align:middle;}的描述，就可以使它们的中心在同一水平线上了！

7, 一个设置了边框的容量，如#BOXa{border:#ccc solid 1px;}，它里面有浮动元素，拖动滚动条时，在IE6,7中有时会出现边框断线的情况（FF中不会），这时的解决办法是在#BOXa中加一个属性：background:#fff;一般可以解决；

8,仅IE7可以识别 

*+html select {…!important;} 

=================================

你知道#box div{...}这样写的含义吗？ 

是指，文档中，以box为ID的元素下边的所有标签名为div的元素！也就是说，它并不是来给box赋样式，而是给box下的那两个div赋样式！（让它俩的字为红色） 

而你把div去了，那就是说这次是给box赋样式了，那么下面的div根本没有指定任何样式，所以按css的规定，靠近元素最近的样式将生效！ 

===========================================