html – iPhone邮件：由于锚标记,表格不会延伸到100％？

栏目: Html · 发布时间: 5年前

内容简介：我正在设计一个html简报,到目前为止每个电子邮件客户端都运行正常.在移动设备上,它应该伸展到100％宽度,这是迄今为止的.但：

我正在设计一个html简报,到目前为止每个电子邮件客户端都运行正常.

在移动设备上,它应该伸展到100％宽度,这是迄今为止的.

但：

在邮件打开时的iphone邮件中,我看到百分之百的宽度,直到那时右边的空格被添加.它始终是相同的间隔空间.

我尝试将代码减少到最小,看看原因是什么.在那里,我发现它可能是链接,它可能是一个边界.有时它会再次起作用,然而又不起作用.

在我不知道的html新闻简报中,iphone上有100％的宽度是否有一些神秘感？

码：

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

        <title>Newsletter</title>

        <style type="text/css">


            /* Client-specific Styles */
            #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
            body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
            body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */

            /* Reset Styles */
            body{margin:0; padding:0;}
            img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
            table td{border-collapse:collapse; margin: 0; padding: 0;}
            #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}


            body { 
                background-color: #EEEDEC; 
                font-family: Arial, sans-serif;
                font-size: 15px;
                line-height: 1.5em;
                font-weight: 100;
                text-align: left;
                width: 100%;
            }


            p {
                margin-bottom: 20px;
            }

            a {
                color: #C5111A;
                font-weight: bold;
            }

            table {
                width: 100%;
                text-align: left;
            }

            img { max-width: 100%; }

            table.outter {
                width: 100%;
                background-color: #fff;
            }

            table.center {
                width: 100%;
                background-color: #fff;
            }

            h2 {
                font-family: Arial, sans-serif;
                font-size: 15px;
                font-weight: 100;
                margin-bottom: 20px;
                height: 30px;
                line-height: 30px;
                color: #fff;
                padding-left: 10px;
                background-color: #C5111A;

                background: #C5111A;
                background: -webkit-gradient(linear, left top, left bottom, from(#c4171d), to(#d6404c));
                background: -webkit-linear-gradient(top, #c4171d, #d6404c);
                background: -moz-linear-gradient(top, #c4171d, #d6404c);
                background: -ms-linear-gradient(top, #c4171d, #d6404c);
                background: -o-linear-gradient(top, #c4171d, #d6404c);

                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#c4171d,endColorstr=#d6404c); 
                zoom: 1;

                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;

            }



        </style>

    </head>

    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
        <center>

            <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="main">

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


                <tbody>

                    <!-- BEGINN -->


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

                                            <!-- box -->
                                            <table border="0" cellspacing="0" width="100%">
                                                <tbody>
                                                    <tr>
                                                        <td valign="top">

                                                            <h2 class="h2">Heading</h2>




                                                           <p>This is a Paragraph</p>
                                                           <a href="http://www.google.de">This is a link</a>

                                                        </td>


                                                    </tr>

                                                </tbody>
                                            </table>
                                            <!-- /box -->

                                        </td>
                                    </tr>   
                                </tbody>
                            </table>
                            <!-- /center -->
                        </td>
                    </tr>

                    <!-- END -->

                </tbody>
            </table>

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

        </center>
    </body>
</html>

在此提供的代码中,100％宽度仅在没有锚点的情况下起作用.

以上所述就是小编给大家介绍的《html – iPhone邮件：由于锚标记,表格不会延伸到100％？》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

禅与摩托车维修艺术

(美)罗伯特·M.波西格 / 张国辰 / 重庆出版社 / 2011-9 / 36.00元

在一个炎热的夏天，父子两人和约翰夫妇骑摩托车从明尼苏达到加州，跨越美国大陆，旅行的过程与一个青年斐德洛研修科学技术与西方经典，寻求自我的解脱，以及探寻生命的意义的过程相互穿插。一路上父亲以一场哲学肖陶扩的形式，将见到的自然景色，野外露营的经历，夜晚旅店的谈话，机车修护技术等等日常生活与西方从苏格拉底以来的理性哲学的深入浅出的阐述与评论相结合，进行了对形而上学传统的主客体二元论的反思，以及对科学与艺......一起来看看《禅与摩托车维修艺术》这本书的介绍吧!

码农工具

RGB转16进制工具

RGB HEX 互转工具

html – iPhone邮件：由于锚标记,表格不会延伸到100％？

禅与摩托车维修艺术

RGB转16进制工具

正则表达式在线测试