悬停div时显示1px间隙（在IE8中）

Question

下面的图片显示了问题：

在其他浏览器中工作，但由于某种原因IE8在hover

中div.ImageWrap时显示1个差距

有人知道为什么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;
}