iPhone邮件：由于锚标记，表格不会延伸到100％？
[英]iPhone mail: table doesn't stretch to 100% because of an anchor tag?
问题描述
I'm designing an html newsletter which runs so far very correct on every email client. 
我正在设计一个html新闻通讯，到目前为止每个电子邮件客户端都运行正常。
On mobile devices it should stretch to 100% width, which it does so far. 在移动设备上，它应该伸展到100％的宽度，这是迄今为止的。
But: 但：
On iphone mail when the mail opens, for a second I see the hundred percent width until then a space on the right gets added. 在邮件打开时的iphone邮件中，我看到百分之百的宽度，直到那时右边的空格被添加。 It's always the same spaced space. 它始终是相同的间隔空间。
I tried reducing my code to the minimum to see what the reason could be. 我尝试将代码减少到最小，看看原因是什么。 There I found out it could be links, it could be a border. 在那里，我发现它可能是链接，它可能是一个边界。 Sometimes it works again and then again not. 有时它会再次起作用，然后又不起作用。
Is there some mystery about 100% width on iphone in html newsletters that I didn't yet know about? 在我不知道的html新闻简报中，iphone上有100％宽度的神秘感吗？
Code: 码：
<!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>
In this provided code 100% width will only work without the anchor. 在此提供的代码中，100％宽度仅在没有锚点的情况下工作。
5 个解决方案
解决方案1
19 已采纳 2012-07-13 11:10:33
<body style="min-width: 100%">
解决了这个问题。
解决方案2
2 2012-05-23 17:48:33
Ok, I found a working solution: 好的，我找到了一个有效的解决方案
Just set: 刚设置：
table {
width: 99%; /* 99.99 % doesn't seem to work */
margin: 0 auto;
}
To get rid of the very small minimal gap, I just set the background-color the same as my table. 为了摆脱非常小的最小间隙，我只是将背景颜色设置为与我的表格相同。
Fixed for now! 现在修好了！
解决方案3
1 2012-05-23 14:27:18
Just posted this solution to a related issue: Link in 100% width table results in 90% width table 刚刚将此解决方案发布到相关问题： 100％宽度表中的链接导致90％宽度表
This MacRumors thread provides a solution to the issue: http://forums.macrumors.com/showthread.php?t=1158457 此MacRumors线程提供了该问题的解决方案： http ： //forums.macrumors.com/showthread.php？t = 1158457
Try to put align="center" and style="text-align:center" onto the first table and then put style="text-align:left" onto the second one if necessary.
If you wrap your content in a parent table with center alignment, this oddly seems to eliminate the right margin on the iPhone mail reader. 如果您将内容包装在具有中心对齐的父表中，这奇怪地似乎消除了iPhone邮件阅读器上的右边距。
解决方案4
0 2015-06-01 19:16:49
Using min-width and margin:0 auto; 使用min-width和margin:0 auto; fixed completely this issue for me. 我完全解决了这个问题。
解决方案5
0 2012-03-21 20:38:30
a {display:block;} seems to help. a {display：block;}似乎有所帮助。 i am not really sure, but on the first try, i wrapped that anchor in a paragraph and modified a as said. 我不是很确定，但是在第一次尝试时，我将该锚点包装在一个段落中并修改了一个如上所述。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.