Wie zu beheben in Scheiben geschnittenen Bild in der Tabelle für HTML-E-Mail

Ich wurde zugewiesen, um eine HTML-E-Mail, die ein Bild in der Kopfzeile in einer geschnittenen Bild verwendet. Ich habe noch nie an HTML-E-Mails gearbeitet und ich habe 4 Stunden damit verbracht, den Abstand zu korrigieren.Wie zu beheben in Scheiben geschnittenen Bild in der Tabelle für HTML-E-Mail

Hier ist der Code: http://jsfiddle.net/8EHED/

Zwar gibt es Raum ist zwischen dem tr in der oben genannten Seite, es ist in Ordnung auf normalen Browsern wie IE, Firefox und Chrome.

Das Problem, das ich verrückt bin, macht es in HTML-E-Mail-Nachrichten richtig aussehen. Hier ist, wie es aussieht, wenn ich den Code in eine neue Thunderbird Nachricht importieren:

Sehen Sie, wie der Abstand ist nicht wie es sein sollte? Ich möchte nicht mehr unzählige Stunden damit verbringen, dieses Problem zu lösen! Was vermisse ich oder mache ich falsch?

Quelle

2012-03-30 micah

Ihre Tabelle Zellengrößen sind nicht konsistent, da dies eine Tabelle ist, wird es die Größen Ihrer Zellen zu den unangemessenen Größen verfälschen, da der Versuch eine einheitliche Tabelle zu erstellen, und damit einen anderen Effekt erzeugen dann, was du entworfen hast.

Referenz hier für weitere Lösung:

html table cell width for different rows

oder den Code revidieren:

<table id="Table_01" width="650" height="290" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td valign=top align=left width=302> 
       <a href="http://www.example.com"> 
        <img src="http://i.imgur.com/1o8lX.jpg" width="302" height="51" border="0" alt="1"></a></td> 
      <td valign=top align=left colspan="3" width=241> 
       <img src="http://i.imgur.com/twdmt.jpg" width="241" height="51" alt="2"></td> 
      <td valign=top align=left width=43> 
       <a href="http://twitter.com/"> 
        <img src="http://i.imgur.com/S9yfV.jpg" width="43" height="51" border="0" alt="3"></a></td> 
      <td valign=top align=left width=64> 
       <a href="http://www.facebook.com/"> 
        <img src="http://i.imgur.com/z036s.jpg" width="64" height="51" border="0" alt="4"></a></td> 
     </tr> 
    </table> 

    <table id="Table_02" width="650" height="290" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td valign=top align=left width=302> 
       <a href="http://www.example.com/"> 
        <img src="http://i.imgur.com/E2PmC.jpg" width="302" height="238" border="0" alt="5"></a></td> 
      <td valign=top align=left width=97> 
       <a href="http://www.example.com/collection/photos/"> 
        <img src="http://i.imgur.com/jLf5N.jpg" width="97" height="238" border="0" alt="6"></a></td> 
      <td valign=top align=left width=78> 
       <a href="http://www.example.com/events/"> 
        <img src="http://i.imgur.com/3875u.jpg" width="78" height="238" border="0" alt="7"></a></td> 
      <td valign=top align=left colspan="3" width=173> 
       <a href="http://www.example.com/bottle-service/"> 
        <img src="http://i.imgur.com/gctHJ.jpg" width="173" height="238" border="0" alt="8"></a></td> 
     </tr> 
    </table>

Quelle

2012-03-30 00:56:52 Rich

Vielen Dank für die Bestätigung. Ich hatte keine Ahnung, dass inkonsistente Zellgrößen es so beeinflussen würden. Ich denke, entweder muss meine Grafik neu gestaltet werden oder die Slices müssen aktualisiert werden, um konsistent zu sein. – micah

Ihr Ansatz mit 2 Tabellen behebt das anfängliche Problem, aber es entsteht eine kleine Lücke zwischen den beiden Tabellen. Wie werde ich diese kleine Lücke los? Für jeden, der dies liest, müssen die Höhen beider Tabellen die Höhen der Zeilen widerspiegeln, damit sie richtig funktionieren. – micah

Ihre Tabellen hatten eine statische Höhe von 290, wenn Sie das Höhenfeld entfernen, nimmt die Tabelle die Höhe der Zeilen an. – Rich

die Sie interessieren Lücke

<table cellspacing=0 cellpadding=0 border=0><tr><td><table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td valign=top align=left width=302 height=51> 
       <a href="http://www.example.com"> 
        <img src="http://i.imgur.com/1o8lX.jpg" width="302" height="51" border="0" alt="1"></a></td> 
      <td valign=top align=left colspan="3" width=241> 
       <img src="http://i.imgur.com/twdmt.jpg" width="241" height="51" alt="2"></td> 
      <td valign=top align=left width=43> 
       <a href="http://twitter.com/"> 
        <img src="http://i.imgur.com/S9yfV.jpg" width="43" height="51" border="0" alt="3"></a></td> 
      <td valign=top align=left width=64> 
       <a href="http://www.facebook.com/"> 
        <img src="http://i.imgur.com/z036s.jpg" width="64" height="51" border="0" alt="4"></a></td> 
     </tr> 
    </table> 
    </td></tr> 
    <tr><td> 
    <table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
      <td valign=top align=left width=302 height=238> 
       <a href="http://www.example.com/"> 
        <img src="http://i.imgur.com/E2PmC.jpg" width="302" height="238" border="0" alt="5"></a></td> 
      <td valign=top align=left width=97> 
       <a href="http://www.example.com/collection/photos/"> 
        <img src="http://i.imgur.com/jLf5N.jpg" width="97" height="238" border="0" alt="6"></a></td> 
      <td valign=top align=left width=78> 
       <a href="http://www.example.com/events/"> 
        <img src="http://i.imgur.com/3875u.jpg" width="78" height="238" border="0" alt="7"></a></td> 
      <td valign=top align=left colspan="3" width=173> 
       <a href="http://www.example.com/bottle-service/"> 
        <img src="http://i.imgur.com/gctHJ.jpg" width="173" height="238" border="0" alt="8"></a></td> 
     </tr> 
    </table> 
    </td></tr></table>

Quelle

2012-03-30 21:07:12 Rich

Richtig, das habe ich vorher probiert, aber leider hat es nicht funktioniert. Wenn ich sie an Gmail oder Hotmail oder eine andere Online-E-Mail sende, bleibt immer noch Platz zwischen den beiden Tabellen. – micah

Zeigen Sie die Quelle der E-Mail an und suchen Sie nach Zeichen für die Zeichen. In Ihrem Code befindet sich irgendwo eine Textformatierungsoption, die Browser ignorieren, aber E-Mail-Apps erkennen und aktivieren. – Rich

Der einzige Unterschied, den ich sehen kann, ist, dass es ein Element gibt, das vorher nicht da war. Ich habe versucht, es mit CSS anzusteuern, aber das hat nichts bewirkt, also glaube ich nicht, dass es dieses neue tbody-Element ist. Abgesehen davon, und abgesehen von der aktualisierten src (die sich nur ändert, um die Bilder in die E-Mail aufzunehmen), sehe ich, dass es konsistent ist. – micah

hinzufügen style = "display zu entfernen: Block "zu Ihrem Bild

Quelle

2013-10-31 11:43:04

Wie zu beheben in Scheiben geschnittenen Bild in der Tabelle für HTML-E-Mail

Antwort

Verwandte Themen