IE 7在桌面上增加了额外的高度

Question

我试图找到为什么IE增加了额外的空间.这是一个临时图像,唯一的静态数据是图像宽度(171像素).

在Jquery中我提醒了div高度,在Firefox,Chrome和Opera中,div高度为164px,但在IE 7上它有172个!

火狐:

铬:

IE 7:

HTML:

<div class='wide-box'>
            <table border="0" cellspacing="0" cellpadding="0" width="171">
                <tr><td height="7"><img src="images/wide-box-header.png" width="100%" alt='' /></td></tr>
                <tr><td class='y-repeat'><img src="images/temp/3.png" alt=''/></td></tr>
                <tr><td height="9"><img src="images/wide-box-footer.png" width="100%" alt='' /></td></tr>
                <tr><td class='shadow'></td></tr>
            </table>
        </div><!-- WIDE BOX -->

CSS:

.wide-box{
    display:block;
    width:171px;
    float:right;
    margin-right:10px;
}

.wide-box .y-repeat img { display:block;margin:0 auto; }
.wide-box .y-repeat { background:url(images/wide-box-y-repeat.png) top left repeat-y; }
.wide-box .shadow { height:10px;background:url(images/wide-box-shadow.png) top center no-repeat; }

jQuery的:

$(window).load(function(){
    $(".wide-box table").height( $(".wide-box .y-repeat img").height() + 24 );
});

为什么IE讨厌我？

Answer 1

我实际上看到了Chrome和IE9中的间距.没有看到完整的例子我不能确定,但​​添加

td img {
    display:block;
}

删除了本地测试中行之间的间距.