1

他の質問をいくつか閲覧しましたが、問題を解決するものが見つかりませんでした。

ここにコード スニペットを作成しました: http://jsfiddle.net/manoj382/3SeB7/embedded/result/

1 つの行と 6 つのセルを含むテーブルがあります。各 td/cell の幅が定義され、その内部の画像の幅と一致します (各画像の幅も定義されます)。すべて正常に動作しますが、ブラウザーでズームインまたはズームアウトすると、散発的に白い隙間が表示されます。

コード内の空白を削除しようとしました。幅と高さを定義しました。画像はdisplay:blockに設定されています。各セル/画像の幅の合計は、テーブル全体の幅の合計と一致します。これも定義されています。ただし、クライアントはズーム時のギャップについてうるさいので、アイデアがありません。

*これは HTML ニュースレター用です。そのため、昔ながらのテーブル レイアウト方法を使用しています。

<table width="600" cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td width="31">
                <img src="http://placekitten.com/g/31/64" style="width:31px; height:64px;">
            </td>

            <td width="65">
                <img src="http://placekitten.com/g/65/64" style="width:65px; height:64px;">
            </td>

            <td width="411">
                <img src="http://placekitten.com/g/411/64" style="width:411px; height:64px;">
            </td>

            <td width="64">
                <img src="http://placekitten.com/g/64/64" style="width:64px; height:64px;">
            </td>

            <td width="29">
                <img src="http://placekitten.com/g/29/64" style="width:29px; height:64px;">
            </td>

        </tr>
    </tbody>
</table>

関連する CSS:

<style type="text/css">
    img {display:block !important;}
</style>
4

5 に答える 5

3

While zooming in/out, the browser has to round the box widths to integers. You cannot assume that things will always be properly aligned.

One solution could be to use float: left boxes instead of table cells so that the boxes are always guaranteed to be flush against each other.

Another solution could be to use background images instead of <img> tags as @user1760422 mentioned in a comment above. You could make the images slightly wider than the cells or just allow background-repeat: repeat-x to show a patch of pixels instead of a white strip between the images.

于 2012-10-27T05:58:58.150 に答える
2

なぜこれを行っているのか説明できません（Macで複製できます）。しかし、私には修正があります。

何らかの理由で、幅 411 ピクセルのテーブル セルが幅 412 ピクセルとして表示されます。画像自体の幅は 411 ピクセルしかありませんが、画像の幅も 412 ピクセルで表示されます。これは、Chrome Dev Tools を実行して表のセルにマウスを合わせると確認できます。説明できない何らかの理由で、実際の幅が 412 であることが示されます。

上部のテーブル幅 600 を削除すると、問題はなくなります。

これを変える：

<table width="600" cellpadding="0" cellspacing="0" border="0">

に：

<table cellpadding="0" cellspacing="0" border="0">

参照: http://jsfiddle.net/3SeB7/1/embedded/result/

于 2012-10-27T05:41:01.387 に答える
1

問題は、スライスされた画像が時々奇数の整数になることです。画像スライスの幅を偶数に変更すると (もちろん img タグと td タグの幅も)、特定のズーム レベルでギャップが解消されます。

于 2014-04-16T18:02:05.940 に答える
0

テーブルで幅を指定する代わりに、スタイル タグで幅を指定してみてください。

の代わりに

以下を試してください

<table style="width:700px" cellpadding="0" cellspacing="0" border="0">

于 2013-12-09T03:57:46.393 に答える
-1

同様の問題がありました。ブラウザーが行っているのは、セルを増やして、それらを組み合わせてテーブルの幅全体を埋めることです。これにより、画像と現在の td の<td>間に空白が生じます。これは、すべての画像の を に設定することで修正できます。XXpxXX.2313pxmin-width100%

于 2016-09-22T17:32:04.027 に答える