javascript - IE8 显示图像之间的分隔线

标签 javascript html css internet-explorer-8

<分区>

在我的站点中，我使用以下代码将四张图片设置为一个正方形

        <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。请注意将顶部的两个图像与底部的两个图像分开的线。

enter image description here