IE8显示图像之间的分隔线

Question

在我的网站中，我将四个图像设置为一个正方形，并带有以下代码

        <div id="tempo_main">

        <div id="tempo_content">
            <div style="text-align: center;z-index: 3;position: absolute;right:350px; left:350px; top: 305px; overflow: hidden;"><img alt="PW" src="/media/1001/prospectLogo.jpg" width="319" height="115" /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="black">
    <tr>    
        <td align="right"><a href="/ourwines/whites.aspx" ><img src="media/1012/intro_3_Fade.gif" border="0" onmouseover="this.src='media/1013/intro_3_Original.gif'" onmouseout="this.src=src='media/1012/intro_3_Fade.gif'" height="250" widht="357" /></a></td>
        <td align="left"><a href="AwardsAccolades.aspx"><img src="media/1008/intro_1_Fade.gif"  border="0" onmouseover="this.src='media/1009/intro_1_Original.gif'" onmouseout="this.src=src='media/1008/intro_1_Fade.gif'" height="250" width="357" /></a></td>
    </tr>
    <tr>    
        <td align="right"><a href="/winery.aspx"><img src="media/1014/intro_4_Fade.gif" border="0" onmouseover="this.src='media/1015/intro_4_Original.gif'" onmouseout="this.src=src='media/1014/intro_4_Fade.gif'" height="250" width="357" /></a></td>
        <td align="left"><a href="#"><img src="media/1010/intro_2_Fade.jpg" border="0" onmouseover="this.src='media/1011/intro_2_Original.jpg'" onmouseout="this.src='media/1010/intro_2_Fade.jpg'" height="250" width="357" /></a></td>
        <td height="25"></td>
    </tr>   
</table>

我正在为其他人的旧代码工作，这个代码是在5年多前完成的！一切都适用于Chrome，但只是IE8在图像之间产生了这种差距。

下图显示了问题的一个示例！顶级浏览器是IE8，底层浏览器是chrome。注意将顶部的两个图像从底部的两个图像分开的线。

Answer 1

看起来浏览器添加了一个边距。尝试删除任何填充或从图像中删除任何边框。我认为某些版本的IE为图像添加了边框。