内容简介:我正在设计一个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%?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- YAML,另一种标记语言?不止是标记语言
- html5 – 用于span标记的Twitter Bootstrap工具提示(不适用于标记)
- 开发 地图标记工具 后记
- WPF标记扩展的笔记
- IOS自动进行View标记
- xml – 在标记中嵌入XSL代码
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。