Css样式问题.docVIP

Css样式问题 IE中怎么会出现双倍边距？ 左右Margin加倍的问题当box为float时，IE6中box左右的margin会加倍 div {float:left;margin-left:10px;width:420px;height:150px;border:1px solid red } 本来左边距设置为10px，但IE6.0解释为20px, 解决办法就是是加上display:inline。 4、为什么对容器设置float又要设置display:inline ul li {float:left;margin:0 12px 12px 0; display:inline;} display:inline的意思是基线显示，可以消除IE6和IE7下的浮动BUG，display:inline可以消除IE6双倍边距的BUG。 2、闭合浮动元素（clearing float）的简单方法 div id=wrap div class=column_left h1Float left/h1 /div div class=column_right h1Float right/h1 /div /div #wrap{ border:6px #ccc solid; overflow:auto; _height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;} _height:1%主要是针对IE不能清除浮动而设置的。 overflow:auto清除浮动 2、a清除浮动的新方法 清楚浮动的问题,以前一般用clear:both,今天看到一个更好的解决办法：增加了width 和overflow 两个属性就可以了 2、b外层box自动计算高度的问题 根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title/title style .outer { width:600px; background:#000; } .inner1 { float:left; width:200px; height:100px; margin:5px; background:red; } .inner2 { float:left; width:200px; height:100px; margin:5px; background:yellow; } /style /head body div class=outer div class=inner1/div div class=inner2/div /div /body /html 火狐中浏览效果！ IE中浏览效果Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。 上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上一个包含clear:both属性的div后，可以正确计算margin。但是firefox中仍然没有黑色背景，通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，这样就不会增加额外的高度了。如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title/title style .outer { width:600px; background:#000; overflow:auto; } .inner1 { display:inlin