iPhone邮件:由于锚标签，桌子不能伸展到100％吗? [英] iPhone mail: table doesn't stretch to 100% because of an anchor tag?
问题描述
我正在设计一个html时事通讯，到目前为止，该时事通讯在每个电子邮件客户端上都非常正确.
I'm designing an html newsletter which runs so far very correct on every email client.
在移动设备上，它应该伸展到100％的宽度，到目前为止，它已经做到了.
On mobile devices it should stretch to 100% width, which it does so far.
但是:
在iphone邮件上，当邮件打开时，我看到一秒钟的宽度为100％，直到右边添加了一个空格.始终是相同的间距.
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. 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.
我尚不了解的HTML新闻稿中的iPhone上约有100％的宽度是否有些神秘?
Is there some mystery about 100% width on iphone in html newsletters that I didn't yet know about?
代码:
<!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％的宽度仅在没有锚点的情况下有效.
In this provided code 100% width will only work without the anchor.
推荐答案
<body style="min-width: 100%">
解决了这个问题.
这篇关于iPhone邮件:由于锚标签，桌子不能伸展到100％吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
