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