1

IE が余分なスペースを追加する理由を見つけようとしています。これは一時的な画像です。唯一の静的データは画像の幅 (171 ピクセル) です。

Jquery で div の高さを警告しました。Firefox、Chrome、Opera では div の高さは 164px ですが、IE 7 では 172 です!

ファイアフォックス:

ファイアフォックス

クロム：

クロム

IE7:

IE7

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

Jクエリ:

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

なぜ IE は私を嫌うのですか?

4

2 に答える 2

6

私は実際に Chrome と IE9 で間隔を見ています。完全な例を見ないと確信が持てませんが、追加します

td img {
    display:block;
}

私のローカルテストで行間のスペースを削除しました。

于 2012-08-15T10:02:39.520 に答える
0

次のcss リセット スクリプトを追加します: http://meyerweb.com/eric/tools/css/reset/

于 2012-08-15T09:45:49.187 に答える