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

Question

下图显示了问题：

在其他浏览器中工作，但由于某种原因，IE8hover在我的浏览器中显示 1 个间隙div.ImageWrap

有人可以知道为什么 IE 会这样。

小提琴
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;
}