Question

我试图将我公司的电子邮件设置为更适合移动设备的电子邮件。不幸的是，因为这是基于电子邮件的，所以我必须像1999年那样构建它们：主要是表格和图像切片。

我将表设置为特定宽度，没有定义高度。每张桌子不超过一排，通常2-3列。每个表格单元一个图像。目前，我没有定义表格单元格或图像的尺寸。

这是我正在处理的新响应代码：

@media (max-width: 670px) { 
    body { 
        background-color: red !important; /* for testing */
    }
    table {
        width: 100% !important;
        height: auto !important;
    }
    table img {
        width: 100% !important;
        height: auto !important;
    }
}
@media (max-width: 480px) { 
    body { 
        background-color: blue !important; /* for testing */
    }
}

http://codepen.io/BevansDesign/pen/CnAfB

正如您在Codepen页面上看到的那样，如果缩小窗口的宽度，图形将适当缩小。然而在Chrome中，由于基于像素的缩放有点奇怪，我在图像（绿线）之间会出现很多间隙。（在FF中工作正常，当然在IE8中根本不起作用，我还没有对其他任何东西进行过测试。）

有谁知道如何摆脱这些差距？我尝试将图像高度设置为100％，但只是将图像保留在原始高度并水平搜索它们。

我知道我可以通过手动设置所有尺寸来解决这个问题，但我正在寻找尽可能少调整的解决方案，因为我每周会抽出2-3次这些电子邮件。

感谢您的帮助！

Answer 1

它可能对你有帮助

<强> source

选项1.）添加样式=＆＃34;显示：块＆＃34;到你的形象

<img src="http://www.test.com/test.jpg" style="display:block">

选项2.）如果您的图像高度大于16像素，请设置＆＃34;对齐＆＃34;图像中的属性为以下任何一个：absmiddle，middle，left，right，absbottom，texttop或top

<img src="http://www.test.com/test.jpg" align="absbottom">

选项3.）将图像放在一个块元素中，其样式为＆＃34;行高：10px＆＃34; （或更低）例如：

<div style="line-height:10px"><img src="http://www.test.com/test.jpg"></div>

选项4.）将图像放在一个带有样式=＆＃34; font-size：2px＆＃34;的块元素中。（或更低）

<div style="font-size:2px"><img src="http://www.test.com/test.jpg"></div>

选项5.）添加样式=＆＃34; float：left＆＃34; OR style =＆＃34; float：right＆＃34;

<img src="http://www.test.com/test.jpg" style="float:left">

Answer 2

我遇到过这个问题的最佳解决方案是使用背景图像，将切片保存为透明GIF网格。差距仍然存在，但它们不可见。

在下面的示例中，第一个表使用常规切片，当您在浏览器中缩放时，您会看到出现1或2个像素的窄间隙。 Chrome似乎是最差的，但它也会在其他浏览器中出现。

第二个表使用我的背景和GIF技术。响应式样式将图像切换为Retina友好的高分辨率版本。

<!DOCTYPE html>
<html>
<head>
<title>Slices</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <style type="text/css">
        body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        img { -ms-interpolation-mode: bicubic; }
        img { border: 0; line-height: 100%; outline: none; text-decoration: none; }
        table { border-collapse: collapse !important; }
        body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }


    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .switch-background {
        background-image: url(http://www.interactiveemail.co.uk/DB/slices/full_image_hi.jpg) !important; 
        background-repeat: no-repeat !important; 
        background-size: 100% !important; 
      }
}


        @media screen and (max-width: 640px) {
            table { width: 100% !important; max-width: 414px !important; }
            table img { width: 100% !important; height: auto !important; }
      .switch-background {
        background-image: url(http://www.interactiveemail.co.uk/DB/slices/full_image_hi.jpg) !important; 
        background-repeat: no-repeat !important; 
        background-size: 100% !important; 
      }



        div[style*="margin: 16px 0;"] { margin: 0 !important; }
    </style>

</head>

<body style="background-color: #ffffff; margin: 0 !important; padding: 0 !important;">

<!-- 100% table start -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" bgcolor="#ffffff">

            <!-- Regular slices -->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_01.jpg" alt="Slice 1" width="201" height="106" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_02.jpg" alt="Slice 2" width="266" height="106" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_03.jpg" alt="Slice 3" width="133" height="106" style="display: block;"></td>
                </tr>
                <tr>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_04.jpg" alt="Slice 4" width="201" height="172" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_05.jpg" alt="Slice 5" width="266" height="172" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_06.jpg" alt="Slice 6" width="133" height="172" style="display: block;"></td>
                </tr>
                <tr>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_07.jpg" alt="Slice 7" width="201" height="123" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_08.jpg" alt="Slice 8" width="266" height="123" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_09.jpg" alt="Slice 9" width="133" height="123" style="display: block;"></td>
                </tr>
            </table>            

            <br><br>

            <!-- Transparent slices -->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" background="http://www.interactiveemail.co.uk/DB/slices/full_image_lo.jpg" class="switch-background">
              <tr>
                <td><!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:401px;">
                    <v:fill type="tile" src="http://www.interactiveemail.co.uk/DB/slices/full_image_lo.jpg" color="#ffffff" />
                    <v:textbox inset="0,0,0,0">
                    <![endif]-->
                    <div><table width="600" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_01.gif" alt="Slice 1" width="201" height="106" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_02.gif" alt="Slice 2" width="266" height="106" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_03.gif" alt="Slice 3" width="133" height="106" style="display: block;"></td>
                      </tr>
                      <tr>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_04.gif" alt="Slice 4" width="201" height="172" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_05.gif" alt="Slice 5" width="266" height="172" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_06.gif" alt="Slice 6" width="133" height="172" style="display: block;"></td>
                      </tr>
                      <tr>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_07.gif" alt="Slice 7" width="201" height="123" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_08.gif" alt="Slice 8" width="266" height="123" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_09.gif" alt="Slice 9" width="133" height="123" style="display: block;"></td>
                      </tr>       
                    </table></div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
              </td>
             </tr>
            </table>    

        </td>
    </tr>
</table>
<!-- 100% table end -->

</body>
</html>

表格单元格内图像的响应缩放会导致Chrome中出现空白

2 个答案: