1px的空隙懸停在div（在IE8）時顯示

Question

下面的圖片顯示問題：在其他瀏覽器，但由於某種原因，IE8顯示1分的差距

工作的時候，我div.ImageWrap

我 hover

有人知道爲什麼IE的行爲是這樣的。

fiddle
JS Bin

HTML：

<table border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td class="first"><div class="imageWrap"></div></td> 
      <td class="first"><div class="imageWrap"></div></td> 
      <td class="first"><div class="imageWrap"></div></td> 
      <td class="first"><div class="imageWrap"></div></td> 
      <td class="first"><div class="imageWrap"></div></td> 
      <td class="first"><div class="imageWrap"></div></td> 
      <td class="first"><div class="imageWrap"></div></td> 
     </tr> 
     </table> 

CSS：

table { 
    float:left; 
    width:100% 
} 
table td.first { 
    width:14%; 
} 
table td .imageWrap{ 
    border:1px solid red; 
    height:100px; 
    margin:0; 
    padding:0; 
    background-color:#000; 
} 

JS：

$('.imageWrap').hover(function() { 
      $('.imageWrap').not($(this)).stop().animate({ 
       opacity: .3 
      }, 500); 
     }, function() { 
      $('.imageWrap').stop().animate({ 
       opacity: 1 
      }); 
     }, 250); 

Answer 1

嘗試使用

table 
{ 
    border-collapse:collapse; 
}