HTMLメールを作成すると、明らかな理由もなくインデントがスパン内に表示されるという奇妙な問題が発生しました。
以下にHTMLを含めましたが、私が見る限り、スパンにパディングやマージンなどは適用されていません。インラインスタイルのどれも、それらが原因である可能性があるようには見えません。ここで非常に基本的なものが欠けていると仮定します。
下の2つの電話番号の左側にあるインデント:(写真は、Litmus電子メールテストアプリのWindows 7 HTC電話テストからのものです）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta name="robots" content="noindex,nofollow" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
@media only screen and (max-device-width: 480px) {
body img.banner {max-width: 300px !important; height: auto !important;}
table {max-width: 300px overflow:visible; width: auto; }
}
div, p, a, li, td { -webkit-text-size-adjust:none; }
span { padding: 0; margin: 0; }
.appleLinks a {color:#400400; text-decoration:none;}
.appleLinksGray a:link,.appleLinksGray a:visited {color:#808080;}
.appleLinksGrayClean a:link,.appleLinksGrayClean a:visited {color:#808080; text-decoration:none;}
</style>
</head>
<body style="font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 12px;">
<table style="background-color: #ffffff; margin: auto; font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 13px;" border="0" cellspacing="0" cellpadding="0" width="627">
<tbody>
<tr>
<td colspan="2"><img class="banner" src="" alt="Alt" width="625" height="100" /></td>
</tr>
<tr>
<td colspan="2" style="text-align: left; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; padding-top: 20px; color: #400400;"><p>Dear ~goesBy~,<br />
<br>
Text</p>
<p>Regards,<br>
Text
<br>
<br>
</p>
<p><span class="appleLinks">Address<br>
<br>
5:00 – 7:00 pm
</span></p>
<p><b style="font-family: arial, helvetica, sans-serif; color:#000;">Name<br />
</b><span style="font-family: arial, helvetica, sans-serif; white-space: nowrap; color: #808080; font-size: 8pt;">Manager<br />
<br />
</span><b><span style="font-family: 'times new roman', times, serif; color: #00644c; font-size: 10pt;"><br />
COMPANY </span></b><br />
<span class="appleLinksGrayClean" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">Address Line 1</span><br />
<span class="appleLinksGrayClean" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">Address Line 2</span><br />
<span class="appleLinksGray" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">111.111.1111</span><br />
<span class="appleLinksGray" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">111.111.1111 direct</span><br />
<span class="appleLinksGray" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">111.111.1111 mobile</span><br />
<a href="mailto:person@example.com" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;"><span class="appleLinksGray" >person@example.com</span></a></p></td>
</tr>
<tr>
<td style="padding-top: 20px;" colspan="2">
<div style="text-align: left; font-family: verdana; color: #333333; font-size: 9px;">Copyright</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>