ie中a标签的hover导致的bug问题解决办法

HTML code

    <div class="menu">  
    <ul>  
      <li><a href="#">首页</a></li>  
      <li><a href="#">介绍</a></li>  
    </ul>  
    </div>  
    <div class="main">  
      <div class="left"></div>  
      <div class="right"></div>  
    </div>  
    <div class="footer"></div>  

 

CSS code

CSS代码

    .menu{width:900px; margin:auto;}  
    .menu a{display:block; width:150px;}  
    .menu a:hover{background:#f00}/*这里会有问题，在鼠标上去的时候hover会导致footer部分往上移*/ 
    .main{width:900px; margin:auto;}
    .main .left{height:600px;float:left;}  
    .main .rightright{height:300px;float:rightright;}  
    .footer{width:900px;margin:auto;}  

 

结果是在firefox下没问题，在ie中会往上移，鉴于这种情况，移动的位置恰好是menu的下面，由此，我想应该是main部分的问题
检查后发现，设置的左右浮动在下面没有清除浮动，所以修改后如下：

XML/HTML代码

<div class="menu">    
<ul>    
  <li><a href="#">首页</a></li>    
  <li><a href="#">介绍</a></li>    
</ul>    
</div>    
<div class="main">    
  <div class="left"></div>    
  <div class="right"></div>   
  <div class="clear"></div>   
</div>    
<div class="footer"></div>

问题解决，结论是ie没有自动清除浮动

原文链接：http://www.joleye.com/viewinfo-541.aspx