求一个通用的clearboth层


<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下都能实现无间隙换行？