iPhone mail: tableau n'est pas extensible à 100% en raison d'une balise d'ancrage?

Je suis de la conception d'une newsletter html qui fonctionne jusqu'à présent très correcte sur chaque client de courrier électronique.

Sur des appareils mobiles, il devrait s'étirer à 100% de largeur, ce qui n'est pas si loin.

Mais:

Sur iphone mail lors de la messagerie s'ouvre, pour un deuxième que je vois le cent pour cent de la largeur jusqu'à un espace sur la droite est ajoutée. C'est toujours la même espacés l'espace.

J'ai essayé de réduire mon code pour le minimum pour voir ce que la raison pourrait être. J'ai trouvé qu'il pourrait y avoir des liens, il pourrait être une frontière. Parfois, il fonctionne à nouveau et là encore pas.

Est-il un mystère à propos de 100% de la largeur de l'iphone en html des newsletters que je ne savais pas encore?

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>

Dans ce code fourni 100% de la largeur de ne travailler sans l'ancre.

Un peu de code ou le résultat du rendu sera utile pour d'autres personnes pour vous aider.
Ok, j'ai mis à jour mon post.
Il ya supplémentaires </td></tr> avant de votre </center>.
Mise à jour, toujours le même problème.
- Ce vraiment me reviennent. Je veux dire, comment pourrait-d'une ancre d'affecter 100% de la largeur de la table?

OriginalL'auteur Melros | 2012-02-29

  1. 19
    <body style="min-width: 100%">

    résout le problème.

    Confirmé. Merci!
    Avoir pour confirmer cela, aussi. J'ai juste eu le même problème et il fixe avec votre réponse maintenant. Parfait!
    3 ans plus tard et cela fonctionne encore!

    OriginalL'auteur kogakure

  2. 2

    Ok, j'ai trouvé une solution qui fonctionne:

    Suffit de le définir:

    table {
width: 99%; /* 99.99 % doesn't seem to work */
margin: 0 auto;
}

    Pour se débarrasser de la très petite taille minimale de l'écart, je viens de mettre la couleur de fond est la même que ma table.

    Fixe pour l'instant!

    OriginalL'auteur Melros

  3. 1

    Vient de poster cette solution à un problème connexe: Lien à 100% de la largeur de la table de résultats dans 90% de la largeur de la table

    Ce MacRumors fil fournit une solution à la question: http://forums.macrumors.com/showthread.php?t=1158457

    Essayer de mettre align="center" et le style="text-align:center" sur la première table, puis mettre style="text-align:left" sur la seconde si nécessaire.

    Si vous enveloppez de votre contenu dans une table de parent avec le centre de l'alignement, cette curieusement semble éliminer la marge de droite sur l'iPhone lecteur de courrier.

    Je vous remercie pour votre réponse et réactiver mon intéressés par cela. J'ai totalement ignoré, mais maintenant est venu avec une solution facile. Voir ma réponse.

    OriginalL'auteur Ilia

  4. 0

    a {display:block;} semble aider. je ne suis pas vraiment sûr, mais sur le premier essai, j'ai enveloppé qui ancre dans un paragraphe et modifié un comme l'a dit.

    Je vous remercie pour votre réponse. J'ai essayé ceci mais ça ne fonctionne pas feather. Je suis toujours coincé ici.

    OriginalL'auteur Tobias

  5. 0

    À l'aide de min-width et margin:0 auto; fixe complètement ce problème pour moi.

    OriginalL'auteur Lena Aniskovich