14

これは以前に取り上げられたことは知っていますが、解決策は役に立ちませんでした。私はプログラマーではありませんが、基本的な HTML コードを処理できます。テーブルに 11 個の画像を配置して 1 つの大きな画像にする HTML メールを送信しようとしていますが、送信すると行間に白い線が表示されます。

テーブルスタイルを設定していますborder="0" cellpadding="0" cellspacing="0"が、これは役に立ちません - 誰かアドバイスをお願いできますか? また、私はプログラマーではないので、複雑な答えを理解できないかもしれません!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled document</title>
</head>
<body>
<!-- Save for Web Slices (toast offer mailer 2.jpg) --> 
<table style="height: 920px;" id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/4/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_01.jpg" width="236" height="201" border="0" style="border: 0;"></a></td>
<td colspan="3"><a href="http://www.metroplan.co.uk/2012/#/78/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_02.jpg" width="177" height="201" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/10/"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_03.jpg" width="237" height="201" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_04.jpg" width="152" height="155"></td>
<td colspan="3"><a href="http://www.metroplan.co.uk/2012/#/116/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_05.jpg" width="173" height="155" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/42/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_06.jpg" width="180" height="155" border="0" style="border: 0;"></a></td>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_07.jpg" width="145" height="155"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_08.jpg" width="650" height="237"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_09.jpg" width="650" height="231"></td>
</tr>
<tr>
<td colspan="3"><a href="http://www.metroplan.co.uk/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_10.jpg" width="314" height="95" border="0" style="border: 0;"></a></td>
<td colspan="4"><a href="mailto:marketing@metroplan.co.uk"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_11.jpg" width="336" height="95" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="152" height="1"></td>
<td><img src="images/spacer.gif" width="84" height="1"></td>
<td><img src="images/spacer.gif" width="78" height="1"></td>
<td><img src="images/spacer.gif" width="11" height="1"></td>
<td><img src="images/spacer.gif" width="88" height="1"></td>
<td><img src="images/spacer.gif" width="92" height="1"></td>
<td><img src="images/spacer.gif" width="145" height="1"></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
4

7 に答える 7

24

画像では、使用してみてください

style="display:block"

それはうまくいくはずです。

于 2012-06-20T10:58:55.657 に答える
6

私が行った簡単なチェックから、問題はセルのマークアップ内の空白スペースが場所を取り、セルを大きくすることが原因であるように見えます。

これを回避する 1 つの方法は、セルのフォント サイズを 0 に設定して、余分なスペースをなくすことです。

修正が適用されたライブ テスト ケース。

あなたの場合、これを送信する HTML に追加してみてください。

<style type="text/css">
    table td { font-size: 0px; }
</style>

これは、テーブルが 1 つしかなく、すべてのセルに画像しかないことを前提としています。テーブルが複数ある場合は、その特定のテーブルを指定します。idたとえば、次の<table id="MyImagesTable">ように変更します。

#MyImagesTable td { font-size: 0px; }

メールを受信するメール クライアントがスタイル シートをサポートしていない場合は、セルごとに手動で設定する必要があります。

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="font-size: 0px;">...</td>
        <td style="font-size: 0px;">...</td>
        <td style="font-size: 0px;">...</td>
    </tr>
    <!-- ...more rows... -->
</table>
于 2012-06-20T11:03:07.777 に答える
3

私も同じ問題に直面しています。

しかし、私は試しました

<img src ="images/xyz.jpg"  style="display:block">

そして解決

于 2014-09-19T08:14:51.733 に答える
1

この問題は多くのメール クライアントでよく見られます。

<img style="display:block" />

HTML のすべての画像に。

于 2013-01-10T22:40:44.913 に答える
0

これの多くは、特定のメール クライアントによって完全に無視されます。これは常に、重いグラフィック HTML メールで取るリスクです。受信者に間違って表示されることはほぼ確実です。私は常にクライアントに、表にグループ化された 6 ～ 12 個の画像であるこの種の電子メール デザインを求めないように勧めています。ただし、それを行うように主張する人は常に存在し、複数のメールクライアントで結果を示した後でも、実行するように要求します.

できれば避けてください。残念ながら、保証された修正は実際にはありません。

同じメール クライアントを使用している受信者のグループにメールを送信する場合は、上記のコードのいずれかを使用して問題を解決し、メール クライアントが最もよく応答するものを見つけることができます。

于 2016-07-04T15:19:06.940 に答える
0

コードを実際に見たことがなくても、画像間に実際のスペースがあるため、画像間にスペースが表示されていると思います。

こんなのあったら…

<img src="image1.jpg">
<img src="image2.jpg">

に変更します... (2 つのイメージ タグの間にスペースがないことに注意してください)

<img src="image1.jpg"><img src="image2.jpg">

個々のセル内に画像を配置する場合 (つまり、セルごとに 1 つの画像)、次の CSS を配置してみてくださいborder-collapse:collapse。

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">

アップデート

@Shadow が指摘したように、上記のどちらの部分も違いはありません。

FireFoxとChromeは（何らかの理由で）テキストと同じように画像を処理しているように見えるため、彼の提案table td { font-size:0px; }はIMHOが正しい答えです。(IE はこの問題の影響を受けないようです。)

于 2012-06-20T11:00:32.753 に答える