DIV和CSS总结.docVIP

DIV和CSS总结 IE6下，DIV容器和padding之和，是DIV所占区域的总宽度（IE8时DIV容器所占区域总宽度不需要计算padding） 真实宽度=width+padding+border+margin !important强调声明前面的语句有效性。比如设置了:padding:0px!important;padding:10px;后面的重要性就不如前面带声明的！ 一、设置为float的div在IE6下margin会加倍 解决方法一：是在这个div里面加上display:inline。但是会导致内容区域的第一行文字出现缩进，和之后的行不对齐，应该再加一层div解决 如：＜#div id=imfloat 相应的css为 #imfloat{float:left; margin:5px; /*IE下理解为10px*/ display:inline; /*IE下再理解为5px*/} 解决方法二：通过!important这样的手段hack。（这里面有3种形式） 第一种： .div { background:orange;/*ff*/ *background:green !important;/*ie7*/ *background:blue; /*ie6*/ } 第二种： .div { margin:10px;/*ff*/ *margin:15px;/*ie7*/ _margin:15px;/*ie6*/ } 第三种： #div { color: #333; } /* ff */ * html #div { color: #666; } /* IE6 */ *+html #div { color: #999; } /* IE7 */ 二、IE6和IE8下的导航菜单 有时候鼠标放上，IE8会有背景色而IE6没有，这时候要给区域加上高度和宽度，试试height:auto;width:88px 二、在google、IE8、Firefox中margin-top的兼容 在这些浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。 解决方法： 1.在相应位置里插入一个非空的元素 div style=height: 0px/div 2.把相应（外层？）的div加入padding-top属性代替margin-top 其实我很多时候都是在父标签中直接加一个padding就得了 三、IE下高度为2px的的div容器会撑开，使用line-height:2px;font-size:0px;后会正常 四、div的自适应高度使用 overflow:hidden;zoom:1; 为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE)用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto; } 五、float的div一定要闭合。否则float的div之后的正常div，在FF会出现平移。 例如：(其中floatA、floatB的属性已经设置为float:left;) div id=”floatA” /div div id=”floatB” /div div id=”NOTfloatC” /div 这里的NOTfloatC并不希望继续平移，而是希望往下排。 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。 在 div class=”floatB”/div div class=”NOTfloatC”/div 之间加上 div class=”clear”/div 这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样式定义为为如下即可： .clear{clear:both;} 也可以使用如下的万能闭合代码 将以下代码加入Global CSS 中,给需要闭合的div加上 class=clearfix 即可,屡试不爽. style /* Clear Fix */ .clearfix:after { content:.; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /*