jquery - div にカーソルを合わせると 1 ピクセルのギャップが表示される (IE8 の場合)

Question

下の画像は問題を示しています。

他のブラウザで動作しますが、何らかの理由で IE8 に 1 つのギャップが表示hoverされます。div.ImageWrap

なぜIEがこのように振る舞うかを誰かが知ることができますか？

フィドル
JSビン

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;
}