Android版Gmail應用：（圖像​​）內嵌圖像之間的水平間隙1px的

Question

在Android Gmail應用中，有時存在1px的的（具有多個包含圖像）內聯的圖像之間的空間。這會將最右邊的圖像推到電子郵件的框架之外。它似乎與某些尺寸的圖像有關，可能與表格/佈局的尺寸有關。

代碼示例如下。附上兩個截圖示例。

This forum post介紹了錯誤，但沒有修復。

我已經試過：很多。我在提到的谷歌產品論壇上發佈了一些技巧，但都沒有成功。通過https://www.inkbrush.com/產生

標記，其具有所有的標準的解決方法仍然顯示這個錯誤。

的問題是在酸性的測試電子郵件間斷。有時它只會出現在實際的設備上。

截圖，第一個打破的圖像，但它說明了其中圖像結束：

從電子郵件示例我撰寫。完整文件in this gist。從inkbrush的主要演示

<tr> 
    <td valign="top"> 
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> 
     <tr> 
     <td valign="top"> 
      <table border="0" cellpadding="0" cellspacing="0"> 
      <tr> 
       <td><a href="http://tracking.telecharge.com/t/33334376/1094175919/73227780/0/81249/?x=83ab5506" target="_blank"><img alt="" border="0" height="30" src="http://content.telecharge.com/telecharge_marketing/20170425Waitress/WAITRESS_013_TELECHARGE_08.jpg" style="display:block; display:block; max-width:312px;" width="312"></a></td> 
      </tr> 
      </table> 
     </td> 
     <td valign="top"> 
      <table border="0" cellpadding="0" cellspacing="0"> 
      <tr> 
       <td valign="top"><a href="http://tracking.telecharge.com/t/33334376/1094175919/73694490/0/81249/?x=41ab12fe" target="_blank"><img alt="" border="0" height="30" src="http://content.telecharge.com/telecharge_marketing/20170425Waitress/WAITRESS_013_TELECHARGE_09.jpg" style="display:block; display:block; max-width:268px;" width="268"></a></td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
    </table> 
    </td> 
</tr> 

樣品：

<tr align="left" style="border-collapse: collapse;border-spacing: 0;border: 0; "> 
    <td> 
     <table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;border-spacing: 0;border: 0; min-width:600px;"> 
      <tbody> 
       <tr style="border-collapse: collapse;border-spacing: 0;border: 0;"> 
        <td align="left" valign="top" style=" width:204px; height:60px; "> 

         <img border="0" height="60" src="./497056_files/5ef86d691f3e7d7cf49f027d0f29d03d-original.jpg" style="display:block; line-height:0; border:0; width:204px; max-width:204px; min-width:204px; height:60px; max-height:60px; min-height:60px;" width="204"> 


        </td> 

        <td align="left" valign="top" style=" width:51px; height:60px; "> 

         <img border="0" height="60" src="./497056_files/f8c41fc2b6d48fca6d4d0b1510c80a84-original.jpg" style="display:block; line-height:0; border:0; width:51px; max-width:51px; min-width:51px; height:60px; max-height:60px; min-height:60px;" width="51"> 


        </td> 

        <td align="left" valign="top" style=" width:49px; height:60px; "> 

         <img border="0" height="60" src="./497056_files/c93fa6d4d1ffa2eb6a5a992205d1160a-original.jpg" style="display:block; line-height:0; border:0; width:49px; max-width:49px; min-width:49px; height:60px; max-height:60px; min-height:60px;" width="49"> 


        </td> 

        <td align="left" valign="top" style=" width:50px; height:60px; "> 

         <img border="0" height="60" src="./497056_files/19df3e027e0c5e2391f76a22de1f0743-original.jpg" style="display:block; line-height:0; border:0; width:50px; max-width:50px; min-width:50px; height:60px; max-height:60px; min-height:60px;" width="50"> 


        </td> 

        <td align="left" valign="top" style=" width:52px; height:60px; "> 

         <img border="0" height="60" src="./497056_files/28a69a7158c8ec60d7cadcbcb2cfe211-original.jpg" style="display:block; line-height:0; border:0; width:52px; max-width:52px; min-width:52px; height:60px; max-height:60px; min-height:60px;" width="52"> 


        </td> 

        <td align="left" valign="top" style=" width:194px; height:60px; "> 

         <img border="0" height="60" src="./497056_files/caf6117f5e93df6c24631c06c09c06c6-original.jpg" style="display:block; line-height:0; border:0; width:194px; max-width:194px; min-width:194px; height:60px; max-height:60px; min-height:60px;" width="194"> 


        </td> 

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

Answer 1

我可能已經找到了解決。

如果不是使用文字圖像尺寸來定義html屬性的寬度和高度，那麼可以使用width =「100％」height =「auto」，然後在CSS中設置最大寬度和最大高度，如：

<td><img src="image1" width="100%" height="auto" alt="" border="0" style="display:block; max-width:200px; max-height:30px"/></td> 

<td><img src="image1" width="100%" height="auto" alt="" border="0" style="display:block; max-width:200px; max-height:30px"/></td> 

<td><img src="image1" width="100%" height="auto" alt="" border="0" style="display:block; max-width:200px; max-height:30px"/></td> 

爲我修好了！

via https://litmus.com/community/discussions/6453-horizontal-gaps-between-images-in-android-gmail#comment-11982