li標簽用到hover，在ie瀏覽器不兼容

最近弄網站的新聞模塊，新聞的列表用到了ul列表。為每個li添加了background，然后添加hover事件：background改變。代碼如下：

HTML code

<li>
        <a href="news_show<? echo $row['id'];?>.html" class="news_tit"><?php echo $row['news_title']; ?></a>
        <span><?php echo $row['news_time']; ?></span>
        <p><?php 
           $str=$row['news_content']; 
           $str=preg_replace('/<img (.*) \/>/i','',$str);
           $str=preg_replace('/<p[^>]*>/i','',$str);
           $str=preg_replace('/<\/p>/i','',$str);
           $str = preg_replace ( "/<a[^>]*>/i", "", $str );
           $str = preg_replace ( "/<\/a>/i", "", $str );
           $str = preg_replace ( "/<span[^>]*>/i", "", $str );
           $str = preg_replace ( "/<\/span>/i", "", $str );
           if(iconv_strlen($str,'utf-8')<120)
              {
                  echo $str;
              }else{
                  echo iconv_substr($str, 0,120,'UTF-8').'...';
              }
              
             ?></p>
         <a href="news_show<? echo $row['id'];?>.html" class="right">查看更多>></a>
         <div class="clear"></div>
        
       </li>

CSS code

.news_right ul{margin-bottom:20px;}
.news_right ul li{background:#f7f7f7; margin-bottom:3px; line-height:1.8em; position:relative; padding:15px; margin-right:20px; }
.news_right ul li:hover{background:#ededed;}
.news_right ul li a.news_tit,.news_right ul li span{color:#d94343; font-size:14px; margin-bottom:5px;}
.news_right ul li span{position:absolute; right:15px; top:15px;}
.news_right ul li p{text-indent:2em;}

效果如下：

在chrome、ff中的顯示效果沒問題，但是在ie瀏覽器中，當鼠標滑動到p標簽附近時背景會再次發生變化，開始以為是p標簽擋住了li標簽，使得li的hover屬性失效，於是想到了JQ的mouseenter跟mouseleave方法，但是用了之后還是發現沒用，經過多次試驗，原來只需要在li標簽上加多個高度就可以解決了。。。真是無語，原來就那么簡單！！

css code：

.news_right ul{margin-bottom:20px;}
.news_right ul li{background:#f7f7f7; margin-bottom:3px; line-height:1.8em; position:relative; padding:15px; margin-right:20px; height:110px;}
.news_right ul li:hover{background:#ededed;}
.news_right ul li a.news_tit,.news_right ul li span{color:#d94343; font-size:14px; margin-bottom:5px;}
.news_right ul li span{position:absolute; right:15px; top:15px;}
.news_right ul li p{text-indent:2em;}

當然，這樣還不行，在ie6中，只支持a:hover，那怎么解決li:hover在ie6中也有效呢？采用onmouseover 和 onmouseout 來代替A的鼠標經過樣式，這樣就可以能LI隨便加個CLASS樣子加上就可以了。最終的代碼如下：

<li onmouseover="this.className='this_over'" onmouseout="this.className='this_out'">
        <a href="news_show<? echo $row['id'];?>.html" class="news_tit"><?php echo $row['news_title']; ?></a>
        <span><?php echo $row['news_time']; ?></span>
        <p><?php 
           $str=$row['news_content']; 
           $str=preg_replace('/<img (.*) \/>/i','',$str);
           $str=preg_replace('/<p[^>]*>/i','',$str);
           $str=preg_replace('/<\/p>/i','',$str);
           $str = preg_replace ( "/<a[^>]*>/i", "", $str );
           $str = preg_replace ( "/<\/a>/i", "", $str );
           $str = preg_replace ( "/<span[^>]*>/i", "", $str );
           $str = preg_replace ( "/<\/span>/i", "", $str );
           if(iconv_strlen($str,'utf-8')<120)
              {
                  echo $str;
              }else{
                  echo iconv_substr($str, 0,120,'UTF-8').'...';
              }
              
             ?></p>
         <a href="news_show<? echo $row['id'];?>.html" class="right">查看更多>></a>
         <div class="clear"></div>
        
       </li>

css code：

.news_right ul{margin-bottom:20px;}
.news_right ul li{background:#f7f7f7; margin-bottom:3px; line-height:1.8em; position:relative; padding:15px; margin-right:20px; height:110px;}
.news_right ul li.this_over{background:#ededed;}
.news_right ul li.this_out{background:#f7f7f7;}
.news_right ul li a.news_tit,.news_right ul li span{color:#d94343; font-size:14px; margin-bottom:5px;}
.news_right ul li span{position:absolute; right:15px; top:15px;}
.news_right ul li p{text-indent:2em;}

這樣，這個新聞模塊就兼容了現在流行的瀏覽器。