div+css之浏览器间的兼容性

@jobour#

这次处理的兼容性问题是同级块之间css的部分属性间的问题包括：float、margin、padding、clear！

下面看一段html代码

<div id="container">  <div id="left">   <div id="l_1"></div>   <div id="l_2"></div>   <div id="l_3"></div>   <div id="l_4">          <div id="l_4_1"></div>         </div>  </div>  <div id="right"></div> </div>

实现这样的效果：

css的写法如下：

*{ padding:0px; margin:0px; font:"宋体"; font-size:12px; } a{ text-decoration:none; outline: none; } a:active{star:expression(this.onFocus=this.blur()); } :focus{ outline:0; } body{ text-align:center; background:#fbfcfe; } #container{ margin:0px auto; width:960px; height:auto; text-align:left; } #left{ width:700px; float:left; }

 #l_1{ border:1px solid #CCC; height:100px; background:#6CB5FD;  }  #l_2,#l_3{ border:1px solid #CCC; height:200px; width:343px; float:left; margin-top:8px; background:#6CB5FD;  }  #l_3{ margin-left:10px;  }  #l_4{ clear:both; padding-top:8px;  }   #l_4_1{ border:1px solid #CCC; height:192px; background:#6CB5FD;   } #right{ width:260px; float:left; background:#89DAFC; }

解释如下：

l_1、l_2、l_3、L_4是属于同级的块级元素，当对于最下层显示的块来说如果他的上层块应用了float属性，那么它本身在火狐，谷歌浏览器下显示是会出现问题的。比如说块2和块3应用了float，此时块4就会受到影响，表现为margin应用无效，而且极有可能出现不该出现的边框，如何解决此问题。有两种办法，一种是对应用了float属性的块以下的同级块应用float属性，让它们有同样的影响力，这样margin就可以应用了。第二种是对应用了float属性的块以下的同级块应用clear属性，来消除上层块float属性的影响，不过此时的margin对部分浏览器仍不会起作用，此时可以不用margin属性，换用padding属性，这样也可以实现同样的效果，这样一来，无需针对任何浏览器写兼容性代码，因为此时已经对IE，火狐，谷歌等浏览器兼容了，显示效果一样。