overflow:hidden控制firefox下div两列背景溢出

下边是div实现两列显示没加overflow:hidden时的代码，在ie中查看效果是正常的，但在firefox中右侧的背景和边框会扩展到左侧．

代码

<! 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" >  
< head >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />  
< title > firefox中div两列 </ title >  
< style  type ="text/css" >  
.w  { width : 400px ; }
.d1  { height : 50px ; float : left ; }
.d2  { height : 50px ; background : #F9EDFA ; border : 2px dotted #A63DAD ; }
</ style >
</ head >  

< body >  
< div  class ="w" >
  < div  class ="d1" > 左侧 </ div >< div  class ="d2" > 右侧 </ div >
</ div >
</ body >  
</ html >

 

下边是修正后的代码，在firefox和ie中都能正常显示了

代码

<! 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" >  
< head >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />  
< title > firefox中div两列 </ title >  
< style  type ="text/css" >  
.w  { width : 400px ; }
.d1  { height : 50px ; float : left ; }
.d2  { height : 50px ; background : #F9EDFA ; border : 2px dotted #A63DAD ; overflow : hidden }
</ style >
</ head >  

< body >  
< div  class ="w" >
  < div  class ="d1" > 左侧 </ div >< div  class ="d2" > 右侧 </ div >
</ div >
</ body >  
</ html >