HTML电子邮件，表格和内容自行裁剪/折叠（Outlook）

问题描述 投票：1回答：1

我正在处理HTML电子邮件以进行工作。我已经10年多没有这样做了，对于我的生活，在阅读并重新学习HTML电子邮件（sorta）的“方法”之后，我无法弄清楚为什么我的HTML表格会自行崩溃。

我已经检查了不同的设备和桌面应用程序，到目前为止，除了Outlook之外这么好。

在展望中，我的电子邮件显示为压扁。它显示像这样

enter image description here

这是电子邮件的一部分。 （我删除了一些东西，因为工作隐私的东西，但它基本上所有）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

    <title>TITLE HERE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->

    <style type="text/css">

        table td {border: 0px solid #DDDDDD;} 

        .ReadMsgBody { width: 100%; background-color: #F1F1F1; }
        .ExternalClass { width: 100%; background-color: #F1F1F1; }
        body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Arial, Times, serif }
        *[class*="mobileOn"] { display: none !important; max-height: none !important; }

        @-ms-viewport{ width: device-width; }




        .smdWidth{width:600px;}
        .smdPadding{padding-left:10px; padding-right:10px;}

        @media only screen and (max-width: 639px){
            .wrapper{ width:100%;  padding: 0 !important; }
        }    


        @media only screen and (max-width: 480px){ 
            p{padding:10px;}
            .wrapper, .smdWidth{ width:320px;  padding: 0 !important; } 
            .centerClass{ margin:0 auto !important; } 
            .imgClass{width:100% !important; height:auto;}        
            .container{ width:300px;  padding: 0 !important; }
            .mobile{ width:300px; display:block; padding: 0 !important; text-align:center; }
            .mobile50{ width:300px; padding: 0 !important; text-align:center; }
            *[class="mobileOff"] { width: 0px !important; display: none !important; }
            *[class*="mobileOn"] { display: block !important; max-height: none !important; }
            table, td{width:320px !important; text-align:center !important; margin:0px auto;}
        }

    </style>

    <!--[if gte mso 15]>
    <style type="text/css">
        table { font-size:1px; line-height:0; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
        * { mso-line-height-rule: exactly; }
    </style>
    <![endif]-->    

</head>


<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" yahoo="fix" style="background-color:#F2F2F2; font-family:Arial,serif;margin:0;padding:0;min-width: 100%; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;">

    <!-- Start Background -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td width="100%" valign="top" align="center">


            <!-- Start Wrapper  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center">

                <tr>
                    <td align="center">

                        <!-- Start Container  -->
                        <table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
                            <tr>


                                <td width="550" class="mobile" style="font-size:12px; line-height:18px;">
                                    <img src="IMAGE SOURCE HERE" alt="">
                                </td>



                                <td width="50" class="mobile" style="font-size:12px; line-height:18px;">
                                    <a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
                                </td>

                                <td width="50" class="mobile" style="font-size:12px; line-height:18px;">
                                    <a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
                                </td>
                            </tr>
                        </table>
                        <!-- Start Container  -->                   

                    </td>
                </tr>

            </table> 
            <!-- End Wrapper  --> 


            <!-- Start Wrapper  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center" >

                <tr>
                    <td align="center">

                        <!-- Start Container  -->
                        <table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
                            <tr>
                                <td width="600" height="199" class="mobile smdWidth" style="font-size:12px; line-height:18px;">
                                    <img style="width:100%; height:199px; display:block;" class="smdBanner" src="IMAGE SOURCE HERE" alt="">
                                </td>
                            </tr>
                        </table>
                        <!-- Start Container  -->                   

                    </td>
                </tr>

            </table> 
            <!-- End Wrapper  -->            

            </td>
        </tr>
    </table>
    <!-- End Background -->

</body>
</html>

我的智慧结束了。我已经尝试将硬度设置到桌面（TD），我尝试通过css内联设置高度......没什么。

非常感谢任何帮助/指导。我得在星期一之前把这个转过来哈哈。提前致谢。

html css html-email
1个回答
0
投票

我感觉它的线条高度导致问题。我已将其从您的代码及其下方删除。让我知道它是否适合你。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

    <title>TITLE HERE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->

    <style type="text/css">

        table td {border: 0px solid #DDDDDD;} 

        .ReadMsgBody { width: 100%; background-color: #F1F1F1; }
        .ExternalClass { width: 100%; background-color: #F1F1F1; }
        body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Arial, Times, serif }
        *[class*="mobileOn"] { display: none !important; max-height: none !important; }

        @-ms-viewport{ width: device-width; }




        .smdWidth{width:600px;}
        .smdPadding{padding-left:10px; padding-right:10px;}

        @media only screen and (max-width: 639px){
            .wrapper{ width:100%;  padding: 0 !important; }
        }    


        @media only screen and (max-width: 480px){ 
            p{padding:10px;}
            .wrapper, .smdWidth{ width:320px;  padding: 0 !important; } 
            .centerClass{ margin:0 auto !important; } 
            .imgClass{width:100% !important; height:auto;}        
            .container{ width:300px;  padding: 0 !important; }
            .mobile{ width:300px; display:block; padding: 0 !important; text-align:center; }
            .mobile50{ width:300px; padding: 0 !important; text-align:center; }
            *[class="mobileOff"] { width: 0px !important; display: none !important; }
            *[class*="mobileOn"] { display: block !important; max-height: none !important; }
            table, td{width:320px !important; text-align:center !important; margin:0px auto;}
        }

    </style>

    <!--[if gte mso 15]>
    <style type="text/css">
        table { font-size:1px; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
        * { mso-line-height-rule: exactly; }
    </style>
    <![endif]-->    

</head>


<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" yahoo="fix" style="background-color:#F2F2F2; font-family:Arial,serif;margin:0;padding:0;min-width: 100%; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;">

    <!-- Start Background -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td width="100%" valign="top" align="center">


            <!-- Start Wrapper  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center">

                <tr>
                    <td align="center">

                        <!-- Start Container  -->
                        <table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
                            <tr>


                                <td width="550" class="mobile" style="font-size:12px;">
                                    <img src="IMAGE SOURCE HERE" alt="">
                                </td>



                                <td width="50" class="mobile" style="font-size:12px;">
                                    <a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
                                </td>

                                <td width="50" class="mobile" style="font-size:12px;">
                                    <a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
                                </td>
                            </tr>
                        </table>
                        <!-- Start Container  -->                   

                    </td>
                </tr>

            </table> 
            <!-- End Wrapper  --> 


            <!-- Start Wrapper  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center" >

                <tr>
                    <td align="center">

                        <!-- Start Container  -->
                        <table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
                            <tr>
                                <td width="600" height="199" class="mobile smdWidth" style="font-size:12px;">
                                    <img style="width:100%; height:199px; display:block;" class="smdBanner" src="IMAGE SOURCE HERE" alt="">
                                </td>
                            </tr>
                        </table>
                        <!-- Start Container  -->                   

                    </td>
                </tr>

            </table> 
            <!-- End Wrapper  -->            

            </td>
        </tr>
    </table>
    <!-- End Background -->

</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.