Question

我正在创建响应式HTML电子邮件，因此我正在使用表格。我在Firefox中进行测试，但是当媒体查询中的CSS启动时，无法摆脱图像下方出现的细微间隙。背景颜色显示在表格之间。我尝试了各种修复程序，并在下面包含我的电子邮件的精简示例。图像问题是位于内容副本上方的曲线角形条（body-copy-top-bdr.jpg）。当视口为640px或更低时，可以在此图像下方看到不需要的薄间隙。

非常欢迎任何有用的建议。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test table</title>                                                                                                      
<style type="text/css">


    @media only screen and (max-width: 640px)  {
                    body[yahoo] .deviceWidth {width:440px!important; padding:0 0px;}
                    body[yahoo] .imageWidth {width:400px!important; padding:0 0px;} 
                    body[yahoo] .center {text-align: center!important;}  
                    .twoColStack { width: 100%!important; display: block!important;}
                    .columnImage{ height:auto !important;}
                    .mobTab { display: block!important;}
                    .desk { display: none!important;}

                    body[yahoo] .deviceWidth img{display:block!important; line-height:0!important;}

            }

    @media only screen and (max-width: 479px) {
                    body[yahoo] .deviceWidth {width:280px!important; padding:0 0px;}
                    body[yahoo] .imageWidth {width:250px!important; padding:0 0px;} 
                    body[yahoo] .center {text-align: center!important;}  
            }


</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Arial, Helvetica, sans-serif" style="border-spacing: 0; border-collapse: collapse">
<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" style="border-spacing: 0; border-collapse: collapse">
    <tr>
        <td width="100%" valign="top" style="padding-top:0px" bgcolor="#000000" style="border-spacing: 0; border-collapse: collapse">
            <table width="580"  class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td valign="top" style=" padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;"><img  class="deviceWidth" src="images/body-copy-top-bdr.jpg" alt="" border="0" style="display: block;" /></td>
                </tr>        
            </table>            

            <!-- Row Two - Start One Column -->
            <table width="580"  class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-spacing: 0; border-collapse: collapse">                
                <tr>
                    <td style="font-size: 16px; color: #000000; font-weight: bold; text-align: left; font-family:Arial, Helvetica, sans-serif; line-height: 20px; vertical-align: top; padding:10px 20px 10px 10px; border-spacing:0;" bgcolor="#ffffff">123456789</td>
                </tr>              
            </table>



        </td>
    </tr>
</table> <!-- End Wrapper -->
</body>
</html>

html表：图像周围不需要的空白 - Firefox（不是Safari或Chrome）

0 个答案: