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，火狐，谷歌等浏览器兼容了，显示效果一样。