通用的clearboth层

求一个通用的clearboth层

HTML code

 
  <html> 
  <head> 
      <title> </title> 
      <style type="text/css"> 
         * {margin:0; padding:0;} 
         #d1,#d2,#d3,#d4 {float:left; width:60px;} 
         #d1 {background-color:red;}  
         #d2 {background-color:blue;}  
         #d3 {background-color:yellow;} 
         #d4 {background-color:black;} 
         .clearboth {clear: both; font-size: 0; height: 0; margin: 0;} 
      </style> 
  </head> 
  <body> 
      <div id="d1">1 </div> 
      <div id="d2">2 </div> 
      
      <!-- 清除浮动，换行 --> 
      <div class="clearboth"> </div> 
      
      <div id="d3">3 </div> 
      <div id="d4">4 </div> 
  </body> 
  </html>

以上的<div class="clearboth">用于清理浮动布局，起到换行的作用。
但是页面在FF3.5和IE8下显示有差别。
FF3.5场合下，两行之间是没有间隙的；
但是到IE8下，两行间出现了一些间隙。

如何改进clearboth层，才能在FF3.5和IE8下都能实现无间隙换行？

------解决方案--------------------
.clearboth {clear: both; font-size: 0; height: 0; margin: 0;overflow:hidden;}
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

加上doctype换成标准模式就好了

相关推荐