html – iPhone邮件:由于锚标记,表格不会延伸到100%?

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

内容简介:我正在设计一个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%?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

Algorithms

Algorithms

Sanjoy Dasgupta、Christos H. Papadimitriou、Umesh Vazirani / McGraw-Hill Education / 2006-10-16 / GBP 30.99

This text, extensively class-tested over a decade at UC Berkeley and UC San Diego, explains the fundamentals of algorithms in a story line that makes the material enjoyable and easy to digest. Emphasi......一起来看看 《Algorithms》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具